DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다.
조작하고자 하는 DOM 객체에 접근하는 선행 과정이 필요합니다.
모든 연산은 document에서 시작됩니다.
document가 관문이라고 생각하면 되비니다. 관문을 통과하면 어떤 노드에도 접근할 수 있습니다.
트리 상단의 documentElement와 body
DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다.
<html> = document.documentElement: <html> 태그에 해당하는 document.documentElement 입니다.
<body> = document.body: <body> 요소에 해당하는 DOM 노드로 자주 쓰이는 노드 중 하나입니다.
주의 사항
<script></script> 코드가 끝나기 전(로딩중..) document.body 또는 더 하위 레벨의 태그를 불러 올 경우 null이 출력됩니다.
childNodes, firstChild, lastChild로 자식 노드 탐색하기
-
자식 노드(child node, children)은 바로 아래 자식 요소를 나타냅니다.
자식 노드는 무보 모드의 바로 아래에서 중첩 관계를 만듭니다.<head>, <body>는<html>요소의 자식 노드 입니다. -
후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다.
자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.
DOM 컬렉션
childNodes는 유사 배열 객체입니다.
따라서 for...of를 사용할 수 있습니다.
for(let node of document.body.childNodes){
console.log(node) // 컬렉션 내 모든 노드를 보여줍니다.
}배열이 아니기 때문에 배열 메소드를 쓸 수 없습니다. (for...in 반복문을 사용할 수 없습니다.)
DOM 컬렉션은 읽는 것만 가능합니다. 탐색용 프로퍼티는 읽기 전용입니다.
어렵기 때문에 다시 한 번 봐야합니다.
