자바스크립트 입문학습 7부 js dom 예제 조작_기본지식
- PHP中文网원래의
- 2016-05-16 19:02:59946검색
지난 기사에서는 DOM을 사용하여 노드를 생성하고, 노드를 복사하고, 노드를 삽입하는 방법에 대해 이야기했습니다. 오늘은 노드 삭제, 노드 교체, 노드 찾기 등에 대해 이야기해보겠습니다.
다음 메소드에서 직접 시작:
1, 노드를 삭제합니다. RemoveChild():
a
b
c
><script> <br>var msg = document.getElementById("cssrain") <br>var b = document.getElementById("b") <br> msg.removeChild(b); script> <br>삭제할 노드의 상위 노드가 무엇인지 모른다면? parentNode 속성을 사용할 수 있습니다. <br>예: <br><body> <br> <p id="cssrain"> <br> <p id="a">a <br> < p id="b">b </p> <br> <p id="c">c </p> <br> </p> 🎜 ><script> <br>var b = document.getElementById("b") <br>var c = b.parentNode; <br></script> 🎜 >
2, 노드를 교체합니다. repalceChild()
element.repalceChild( newNode , oldNode ); // 새 노드는 게스트이므로 먼저 그를 서비스해야 합니다. . oldNode는 Element의 하위 노드여야 합니다.
예:
a
b
c
><script> <br>var cssrain = document.getElementById("cssrain"); <br>var msg = document.getElementById("b") <br>var para = document.createElement("p"); <br>cssrain.replaceChild( para , msg ); <br></script>
3. 노드 찾기
위 방법에 비해 노드 찾기는 비교적 간단합니다.
많은 분들이 이용해 주셨거든요. (제가 js에 대해 처음 알았던 문장은 getElementById();였습니다.)
getElementById()
nodeName, nodeType, parentNode, ChildNodes 등과 같은 속성을 가진 객체를 반환합니다.
getElementsByTagName()은 태그 이름의 모든 요소를 찾습니다.
컬렉션을 반환하며 루프를 사용하여 각 객체를 꺼낼 수 있습니다. 객체에는 nodeName, nodeType, parentNode, ChildNodes 등과 같은 속성이 있습니다.
예:
var ps = document.getElementsByTagName(“p”)
for(var i=0; i< ps.length; i){
ps[i].setAttribute(“ title","hello");
//다음을 사용할 수도 있습니다: ps.item(i).setAttribute("title","hello");
}
4, Set/ 속성 노드를 가져옵니다.
setAttribute();//Set
예:
var a = document.createElement(“p”)
a.setAttribute(“title”,”my 데모”); 이전에 title 속성이 있었는지 여부에 관계없이 미래 가치는 내 데모입니다.
getAttribute();//Get
예:
var a =document.getElementById(“cssrain”)
var b = a.getAttribute(“title”); > 획득 시 속성이 존재하지 않으면 빈 값을 반환합니다. ie와 ff의 반환은 다릅니다.
aaaa
bbbb
var paras = document. getElementsByTagName("p");
for (var i=0; i var title_text = paras[i].getAttribute(" title")
if (title_text != null) {
//다음과 같이 작성하면 문제가 있습니다. ff는 한 번만 재생되는데, 즉 2번 재생됩니다.
//if (title_text != "") 이렇게 쓰면 즉, 한 번만 팝업되지만 ff는 두 번 팝업됩니다.
//이렇게 쓰면 어떻게 될까요? if (title_text) , ie는 한 번만 팝업되고 ff는 한 번만 팝업되는 것을 발견했습니다.
//if (title_text)가 우리가 원하는 것입니다.
//참고: ff가 없으면 null을 반환합니다.
//즉, ""를 반환합니다.
Alert(title_text)
}
}
🎜 >
반품은 다르지만 한 가지 방법으로 판단할 수 있습니다.
if(a.getAttribute(“title”) ){
// 뭔가를 하세요
}
5,hasChildNodes:
이름으로 알 수 있습니다. 요소에 하위 노드가 있는지 여부.
부울 유형을 반환합니다.
텍스트 노드와 속성 노드는 하위 노드를 가질 수 없으므로 hasChildNodes는 항상 false를 반환합니다.
hasChildNodes는 종종 childNodes와 함께 사용됩니다.
예:
a
< p id="b">b
c
🎜 >