HTML DOM 탐색
표시되는 HTML DOM 통해, 노드 탐색 트리의 관계는 노드를 사용할 수있다.
HTML DOM 노드 목록
getElementsByTagName () 메서드는 노드의 목록을 반환합니다. 노드 목록은 노드의 배열입니다.
다음 코드 선택한 문서의 모든 <p> 노드 :
예
var
x=document.getElementsByTagName("p");
그것은 다음 라벨에 액세스 할 수 있습니다. 두 번째 <P>에 액세스하려면, 당신은 쓸 수 있습니다 :
y=x[1];
»시도
참고 :
레이블에 따라 0에서 시작한다.
HTML DOM 노드 목록 길이
길이 속성은 노드리스트의 노드 수를 정의한다.
당신은 루프 노드 목록에 길이 속성을 사용할 수 있습니다 :
예
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
»시도
분석의 예 :
- 가져 오기 모든 <p> 요소 노드
- 텍스트 노드 각각 <p> 요소의 출력값
탐색 노드 관계
, 인 parentNode, firstChild 및 lastChild 문서 구조를 탐색 : 당신은 세 개의 노드 속성을 사용할 수 있습니다.
다음 HTML 조각을 고려 :
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- 첫 번째 <P> 요소는 <몸>의 첫 번째 자식 요소 (firstChild)
- <DIV> 요소는 마지막 자식 요소는 <몸> 요소 (lastChild)
- <바디> 요소는 첫 번째 <p> 요소와 <div> 요소의 부모 노드 (인 parentNode)입니다
firstChild 속성은 텍스트의 요소에 액세스 할 수 있습니다 :
예
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
»시도
DOM 루트 노드
이 특별한 속성은 문서의 모든 액세스 할 수 있습니다 :
- document.documentElement - 모든 문서
- 는 document.body - 문서의 몸
예
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
»시도
childNodes에와 nodeValue를
innerHTML 속성 외에도 요소의 내용을 얻기 위해 childNodes에와 nodeValue를 속성을 사용할 수 있습니다.
다음 코드는 = "인트로"의 <p> 요소 값 ID를 가져옵니다
예
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
»시도
childNodes에와 nodeValue를이 속성 동안 위의 예에서에서 getElementById는 방법이다.
이 튜토리얼에서, 우리는 innerHTML 속성을 사용합니다. 그러나, 상기 학습 방법은 DOM 트리 구조 및 이해를 탐색 할 수 있습니다.