[JSInfo] DOM 탐색하기

DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다.
조작하고자 하는 DOM 객체에 접근하는 선행 과정이 필요합니다.

모든 연산은 document에서 시작됩니다.
document가 관문이라고 생각하면 되비니다. 관문을 통과하면 어떤 노드에도 접근할 수 있습니다.

DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다.

<html> = document.documentElement: <html> 태그에 해당하는 document.documentElement 입니다.

<body> = document.body: <body> 요소에 해당하는 DOM 노드로 자주 쓰이는 노드 중 하나입니다.

<script></script> 코드가 끝나기 전(로딩중..) document.body 또는 더 하위 레벨의 태그를 불러 올 경우 null이 출력됩니다.

자식 노드(child node, children)은 바로 아래 자식 요소를 나타냅니다.
자식 노드는 무보 모드의 바로 아래에서 중첩 관계를 만듭니다. <head>, <body>는 <html> 요소의 자식 노드 입니다.
후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다.
자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.

DOM 컬렉션

childNodes는 유사 배열 객체입니다.
따라서 for...of를 사용할 수 있습니다.

for(let node of document.body.childNodes){
	console.log(node) // 컬렉션 내 모든 노드를 보여줍니다.
}

배열이 아니기 때문에 배열 메소드를 쓸 수 없습니다. (for...in 반복문을 사용할 수 없습니다.)

DOM 컬렉션은 읽는 것만 가능합니다. 탐색용 프로퍼티는 읽기 전용입니다.

이 문제에 관하여([JSInfo] DOM 탐색하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/JSInfo24

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)