자바스크립트 javascript Dom children 와 childNodes 차이

자바스크립트 javascript Dom children 와 childNodes 차이

 

children와 childNodes가 헷갈려서 정리합니다. 

 

좌: html  우:html이 웹 렌더링된 모습

위와 같은 html코드가 있습니다.

body태그 안에 다양한 종류의 태그들이 있습니다.

 

1.children

콘솔로그창에

document.body.children

 

코드를 찍어봅시다.

위와 같이 body태그 안에 있는 모든 node를 배열로 보여줍니다.

 

document.body.children[0]
document.body.children[1]
document.body.children[2]
document.body.children[3]
document.body.children[4]

이렇게 배열의 인덱스를 사용하는 방식으로 사용가능합니다.

 

 

2.childNodes

마찬가지로 콘솔로그창에 코드를 찎어보겠습니다.

document.body.childNodes

children으로 조회했을때보다 훨씬 많은 양의 배열이 보입니다. children와는 달리 childNodes는 텍스트노드까지 모두 포함하여 배열로 반환해주고 있네요. children와 마찬가지로 배열의 인덱스방식으로 원하는 요소만 취할 수 있습니다.

document.body.childNodes[0]
document.body.childNodes[1]
document.body.childNodes[2]
document.body.childNodes[3]
document.body.childNodes[4]

 

3.결론

childNodes나  children이나 비슷한것 같습니다. 하나만 알아야 한다면 childNodes을 써야겟지만 여러타입의 내용들이 섞여 있는 만큼 실사용에서 불편할수 있다는 생각이 듭니다. 하지만 경우에 따라 childNodes만 할수 있는 일이 있기 때문에 뭐가더 좋다 안좋다를 판단할 수 는 없겠네요. 이런것이 있다는 것을 알아두시고 나중에 프론트엔드를 디자인하실때 경우에 맞게 사용하셔야 하겠습니다. 감사합니다!