DOM

이승훈·2022년 4월 20일

모던 자바스크립트 튜토리얼

목록 보기

2/3

모든 HTML 태그는 객체이다. 태그내의 문자 역시 객체이다.

DOM 구조

<!DOCTYPE HTML>
<html>
<head>
  <title>사슴에 관하여</title>
</head>
<body>
  사슴에 관한 진실.
</body>
</html>

위의 HTML을 DOM은 아래와같이 표현.

태그는 요소 노드이고 트리구조를 구성한다.

html은 루트 노드 head, body는 그 자식 노드
요소 내의 문자는 텍스트 노드
텍스트노드는 자식노드를 가질수 없다.
위 그림에서 알 수 있듯이 줄바꿈 ↵와 공백␣ 도 텍스트 노드이다.
주석도 노드이다.

실무에서 주로 사용하는 노드

총 12개중 주로 사용하는 노드는 네가지다.

document 노드 : DOM의 진입점이 되는 노드
element 노드 : 태그 같은 문서를 구성하는 요소인 노드
text 노드 : 텍스트 노드
comment 노드 : 주석 노드

DOM 요소 확인 사이트

DOM 탐색

DOM의 모든 연산은 document 부터 시작한다.

DOM 탐색의 관계 이미지.

html = document.documentElement
body = document.body
head = document.head

document.body 는 null 일수도 있다.

<html>
  <head>
    <script>
      alert('head' : +document.body) // null 출력. body가 만들어지기 전에 출력하기 때문
    </script>
  </head>
  <body>
  </body>
</html>

자식노드

자식노드 : 요소 바로 아래의 노드들
후손노드 : 요소 아래의 모든 노드들

childNode : 모든 자식 요소들을 담는다.
firstChild : 첫번째 자식 노드 (childNode[0])
lastChild : 마지막 자식 노드 (childNode[childNode.length - 1])
hasChildNode : 자식 요소 존재여부 검사

ChildNode

배열이 아닌 유사 배열인 collection(컬렉션) 이다.

특징

for ~ of 사용 가능
배열이 아니기 때문에 배열함수 사용 불가능.(map,filter,reduce...)
읽기만 가능. (childNode[0] = ... 이런식으로 자식 노드 교체 불가능.
DOM의 현재 상태를 반영. (DOM에 새로운 노드가 참조되거나 삭제시 변경사항이 자동으로 컬렉션에 들어옴.)

배열로 사용 방법.

Array.from을 사용해 진짜 배열로 만들 수 있다.

형제, 부모 노드

형제노드 : 같은 부모를 가진 노드. (ex. <head>,<body> )

nextSibling : 다음 형제 노드(<head>,<body>에서 <head>의 nextSibling은 <body>)
previousSibling : 이전 형제 노드(<head>,<body>에서<body>의 previousSibling 은 <head>.)

부모노드 : parentNode 통해 참조 가능(document.body.parentNode 는 <html>)

위의 프로퍼티들은 모든 종류 노드 탐색. (주석이나 텍스트도)

요소간 이동

children : 자식 노드중 요소 노드만 탐색
firstElementChild, lastElementChild : 자식 노드중 첫번째, 마지막 요소 노드
previousElementSibling, nextElementSibling : 형제 노드중 이전, 다음 요소 노드
parentElement : 부모 요소 노드

parentElement vs parentNode : 부모노드가 요소가 아닐시 전자는 null 반환

과제

1. 아래 DOM 노드에 접근할 방법을 최소 한 가지 이상씩 생각해보세요.

<div> DOM 노드
<ul> DOM 노드
두 번째 <li> (Pete)

<html>
<body>
  <div>사용자:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
  <script>
    /*아래 DOM 노드에 접근할 방법을 최소 한 가지 이상씩 생각해보세요.
      <div> DOM 노드
      <ul> DOM 노드
      두 번째 <li> (Pete) */
    console.log(document.body.firstElementChild) // body의 첫번째 자식 요소노드는 div
    console.log(document.body.lastElementChild) // body의 마짐가 자식 요소 노드는 ul
    console.log(document.body.lastElementChild.lastElementChild) // body의 마지막 자식 요소노드의 마지막 자식 요소노드는 li pete
  </script>
</body>
</html>

2.형제 노드에 관한 질문

임의의 DOM 요소 노드 elem이 있다고 가정해봅시다.

elem.lastChild.nextSibling은 항상 null일까요? YES
=> lastChild는 마지막 노드이므로 nextSibling을 사용할수 있는 다음 노드가 없다(null).
elem.children[0].previousSibling은 항상 null일까요? NO
=> children[0]은 자식요소노드중 첫번째 이므로 요소노드가 아닌 다른 노드가 앞에 있으면 previousSibling을 통해 불러올 수 있다. previousElementSibling일시는 null