HTML DOM childNodes 속성

<시간/>

HTML DOM childNodes 속성은 노드의 자식 노드 컬렉션을 NodeList 객체 형태로 반환합니다. 노드는 HTML 문서에 나타나는 것과 동일한 순서로 정렬되어 있습니다. 이 노드는 0부터 시작하는 인덱스 번호로 액세스할 수 있습니다. 읽기 전용 속성입니다. 공백과 주석도 노드로 간주됩니다.

구문

다음은 childNodes 속성의 구문입니다 -

elementNodeReference.childNodes;

예시

HTML DOM childNodes 속성에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find the div element childnodes.</p>
<button onclick="countNodes()">COUNT</button>
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>
<p id="Sample"></p>
<script>
   function countNodes() {
      var x = document.getElementById("DIV1").childNodes.length;
      document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM childNodes 속성

COUNT 버튼을 클릭하면 -

HTML DOM childNodes 속성

위의 예에서 -

ID가 "DIV1"인

요소를 만들었으며 그 안에 두 개의 단락이 있습니다. 다른 요소와 구분하기 위해 색상 테두리와 약간의 여백을 추가했습니다. 여기서 중요한 점은 각 요소를 한 줄에 가져오기 위해 세 개의 Enter 키를 눌러 out

태그에 총 3개의 공백을 생성한다는 것입니다.

div {
   border: 1px solid blue;
   margin: 7px;
}
<div id="DIV1">
<p>First p element </p>
<p>Second p element</p>
</div>

그런 다음 사용자가 클릭할 때 countNodes() 메서드를 실행하는 버튼 COUNT를 만들었습니다.

<button onclick="countNodes()">COUNT</button>

countNodes() 함수는 id가 "DIV1"인 요소를 가져오고 이 경우

요소는 childnodes.length 속성 값을 가져와 변수 x에 할당합니다.

태그 안에 3개의 공백과 2개의

요소가 있기 때문에 childnodes.length는 5를 반환합니다. 그런 다음 반환된 값은 innerHTML() 메서드를 사용하여 id가 "Sample"인 단락에 표시됩니다.

function countNodes() {
   var x = document.getElementById("DIV1").childNodes.length;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}