서론

코드 작성 중 childNodes를 이용해 리스트를 받아오는데 줄바꿈을 하면 다른 결과가 나오는 현상을 목격할 수 있었다.

그래서 childNodes에 대해서 알아보게 되었고 문제되는 부분의 해결책인 children에 대해서도 알아보았다.

본론

childNodes는 요소의 모든 자식 노드를 반환한다. 이는 텍스트 노드와 주석 노드를 포함한 모든 종류의 노드다. 따라서 HTML 코드가 여러 줄에 걸쳐 작성되었을 경우, 줄바꿈이나 들여쓰기에 사용된 공백 문자들도 텍스트 노드로 간주되어 childNodes의 결과에 포함된다.

children은 요소의 자식 노드 중에서 요소 노드(Element Node)만을 반환합니다. 따라서 텍스트 노드와 주석 노드는 제외된다. 이는 코드의 가독성을 위해 HTML을 여러 줄로 작성하더라도 실제 요소 노드만을 대상으로 처리하므로, childNodes를 사용했을 때와 달리 줄바꿈이나 공백 문자에 의해 결과가 달라지지 않는다.

따라서, children을 사용하면 가독성을 위해 HTML 코드를 여러 줄로 작성하더라도 예상대로 동작하는 코드를 작성할 수 있다.