[JavaScript] 자바스크립트 (DOM 탐색하기)

Document 탐색하기

조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 요소와 요소의 콘텐츠를 조작할 수 있음.

DOM에 수행하는 모든 연산은 document 객체에서 시작한다.

document 객체는 DOM에 접근하기 위한 ‘진입점’이다.

진입점을 통과하면 어떤 노드에도 접근이 가능하다.

자식 노드와 후손 노드

• 자식 노드 : 바로 아래의 자식 요소를 나타낸다
• 후손 노드 : 중첩 관계에 있는 모든 요소를 의미한다. 자식 노드와 그 보다 자식 노드 모두가 후손 노드가 된다.
  • 바로 아래뿐만아니라 그 아래 그 아래..

DOM 컬렉션

childNodes 는 배열같아 보이지만, 배열이 아닌 반복 가능한 유사 배열 객체인 컬렉션(collection)이다.

• childNodes가 컬렉션이기에 가지는 특징.
  • 비록 배열은 아니지만 forEach(), for…of 도 사용 가능하다. (for in 은 사용 불가)
    • for…of : 배열을 순환할 때 사용
    • for…in : 객체를 순환할 때 사용
  • 하지만 배열(array)이 아니기에 배열 메서드 사용 불가

console.log(list.childNodes.filter)
// undefined (filter 메서드가 없습니다.) 

==> filter 메서드나 map 메서드나 사용 불가

• Array.from 을 사용해 배열로 만들어 배열 메서드 사용가능

console.log(Array.from(list.childNodes).filter)