자바스크립트 children and childNodes 차이점과 공통점

자바스크립트 children and childNodes 차이점과 공통점

childNodes?

childNodes 속성은 자바스크립트 노드의 속성중 하나이며 호출된 노드의 자식 노드의 컬렉션을 반환한다. 이 컬렉션은 객체로 index 넘버를 사용하여 접근 가능하다. 첫 번째 자식노드의 인덱스는 0부터 시작한다.

문법

element.childNodes

children?

children은 HTML 요소의 속성 중 하나이며 자식 요소들의 컬렉션을 객체로 반환한다.

문법

element.children

차이점

children은 요소를 반환하며 childNodes는 text, 주석과 같은 모든 노드를 반환한다는 점.

예시

Document Hello world! Hello world! Try it

function childNode() { let childNode = document.body.childNodes; let string = ""; for (let i = 0; i < childNode.length; i++) { string += childNode[i].nodeName + ""; } document.getElementById("p-element").innerHTML = string; }

버튼 클릭 전 버튼 클릭 후

childNodes 속성에 접근하면 위와 같이 노드의 모든 자식 노드를 반환하는 것을 알 수 있다. 하지만 요소의 children 속성에 접근하면 아래와 같이 모든 요소 노드만 반환하는 것을 볼 수 있다.

결론

두 속성 모두 Javascript Array를 반환한다는 공통점을 가지고 있다. 하지만 반환되는 JavaScript Array의 요소가 다르다는 차이점을 가지고 있으며 그 결과는 위 이미지와 같다. Element 또는 요소는 무엇인가? 노드이다. childNodes 속성은 무엇을 반환하는가? 모든 노드를 반환한다. 그렇기 때문에 Element 노드도 반환된다. children 속성은 무엇을 반환하는가? Element 노드만 반환한다.

from http://tamagotch.tistory.com/24 by ccl(A) rewrite - 2021-12-19 14:27:27