[JavaScript] element.childNodes, element.children, Node.contain

오늘은 element.childNodes, element.children, Node.contain에 대해서 공부했다. 

 

동적으로 생성한 html 요소를 조회하는데 유용한 기능들이었다. 

 

element.childNodes 는 주어진 요소의 자식 노드 모음( collection )을 반환해주고, 

 

element.children은 호출된 요소의 모든 자식 노드의 elements를 담고있는 실시간 HTMLCollection을 반환한다. (비 요소 노드 제외) 

 

childNodes와 children의 역할이 헷갈려서 둘의 차이를 알아봤는데 childNodes의 경우 요소가 아닌 비 요소 노드도 포함해주는 반면, element.children은 요소 노드만 배열 형태로 반환해준다.

 

childNodes -> text도 포함된걸 볼 수 있다.

 

children -> 요소들만 포함된 걸 볼 수 있다.

 

 

(HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장 -TCPschool 참조)

www.tcpschool.com/javascript/js_dom_node

코딩교육 티씨피스쿨

 

둘다 배열의 형태로 반환해주지만 이는 유사 배열 객체로 배열 내장 함수를 쓸 수 없다! (bind 또는 call, apply를 이용하면 가능)

(전에 정리해둔 apply(), call(), bind() 글)

[JavaScript] apply(), call(), bind()와 this 키워드

ant-programmer.tistory.com/24

[JavaScript] apply(), call(), bind()와 this 키워드

 

그리고 node.contains()를 사용하면 메소드는 주어진 인자가 node의 자손인지, 아닌지에 대한 Boolean 값을 리턴해준다. 

 

예를들어, body안에 있는 요소들 중에서 원하는 className을 가진 요소만을 리턴 하고 싶다면 

 

그냥 document.getElementsByClassName() 를 사용해줘도 되지만 이 함수를 쓰지 않고도 찾는 것이 가능하다. 

 

  // 만약 해당 요소가 찾고자하는 클래스네임을 가진다면 이런식으로 찾을 수 있다. 
  
   console.log(document.body.classList.contains('~~~'));