javascript

DOM

Posted by Seongkyun Yu on 2020-03-29
Estimated Reading Time 5 Minutes
Words 959 In Total
Viewed Times

1. DOM 이란

  • HTML 문서를 표현하는 트리 자료구조

  • HTML 구조를 제어할 수 있는 API


2. 노드

2.1 노드

HTML을 구성하는 개별적인 요소

  • 문서 노드 : document 객체, HTML당 유일함.

  • 요소 노드 : HTML 요소를 가리키는 객체.

  • 어트리뷰트 노드 : HTML 요소의 어트리뷰트를 가리키는 객체.

  • 텍스트 노드 : HTML 요소의 텍스트를 가리킴. 자식 노드를 가질 수 없다.


2.2 노드 객체의 상속 구조

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체
객체 Object
이벤트를 발생시키는 객체 EventTarget
트리 자료 구조의 노드 객체 Node
브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement



3. 요소 노드 취득

3.1 요소 취득 함수들

함수 역할
Document.prototype.getElementById id로 어트리뷰트 탐색
Document.prototype.getElementsByTagName 태그로 탐색(HTML전체)
Element.prototype.getElementsByTagName 태그로 탐색(특정 요소부터)
Document.prototype.getElementsByClassName 클래스로 탐색(HTML전체)
Element.prototype.getElementsByClassName 클래스로 탐색(특정 요소부터)
Document.prototype.querySelector CSS선택자로 탐색(HTML전체)
Element.prototype.querySelector CSS선택자로 탐색(특정 요소부터)

3.2 HTMLCollection과 NodeList

  • HTMLcollection : 항상 객체 상태 변화를 실시간 반영함 (live)

  • NodeList : 대부분 실시간 반영 안하지만 경우에 따라 live 객체로 동작 (childNodes 프로퍼티)



4. 노드 탐색

4.1 노드 탐색 프로퍼티

  • Node.prototype : parentNode, previousSlibling, firstChild, childNodes

  • Element.prototype : previousElementSlibling, nextElementSlibling과 children

  • 모두 접근자 프로퍼티이다.


4.2 자식 노드 탐색

프로퍼티 설명
Node.prototype.childNodes NodeList(자식 요소) 반환
childNodes NodeList(텍스트 or 요소)를 반환
Element.prototype.children 자식 요소 노드를 HTMLCollection에 담아 반환
children HTMLCollection(요소 노드) 반환
Node.prototype.firstChild 첫번째 자식 노드(텍스트 or 요소)를 반환
Node.prototype.lastChild 마지막 자식 노드(텍스트 or 요소)를 반환
Element.prototype.firstElementChild 첫번째 자식 노드(요소)를 반환
Element.prototype.lastElementChild 마지막 자식 노드(요소)를 반환

4.3 자식 노드 탐색

  • .hasChildNodes : 텍스트 노드 포함 자식 노드 탐색

  • .children.length : 요소 노드 존재만 탐색

  • .Element : 요소 노드 존재만 탐색

  • .firstChild : 텍스트 노드만 탐색


4.4 부모 노드 탐색

  • .Node.prototype.parentNode : 부모 노드 탐색

4.5 형제 노드 탐색

전부 같은 부모 노드를 갖는 형제들 중에서 탐색을 한다.

  • Node.prototype.previousSibling : 이전 형제 노드 탐색 (텍스트 or 요소)

  • Node.prototype.nextSibling : 다음 형제 노드 탐색 (텍스트 or 요소)

  • Element.prototype.previousElementSibling : 이전 형제 노드 탐색 (요소)

  • Element.prototype.nextElementSibling : 다음 형제 노드 탐색 (요소)


4.6 탐색 가능 여부 확인

  • Element.prototype.matches : 특정 노드 탐색 가능 여부 확인



5 노드 정보 취득

5.1 Node.prototype.nodeType

객체 종류를 나타내는 상수 반환

  • 요소 노드 : 1 반환

  • 텍스트 노드 : 3 반환

  • 문서 노드 : 9 반환


5.2 nodeValue

프로퍼티 참조와 할당 모두 가능하지만 텍스트 노드의 값만 의미 있다.

change_text_nodeValue.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello <span>world!</span></div>
  </body>
  <script>
    // div#foo 요소는 텍스트 노드가 아니다.
    console.log(document.getElementById('foo').nodeValue); // null
    // div#foo 요소의 텍스트 노드의 값을 취득
    console.log(document.getElementById('foo').firstChild.nodeValue); // Hello
    // span 요소의 텍스트 노드의 값을 텍스트를 취득
    console.log(document.getElementById('foo').lastChild.firstChild.nodeValue); // world!
  </script>
</html>

5.3 textContent

요소 노드 안의 모든 텍스트를 반환.

참조와 할당 모두 가능하지만 HTML 마크업을 넣어도 문자열 취급된다.

할당시 모든 자식 노드는 제거된다.

change_text_textContent.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <body>
    <div id="foo">Hello <span>world!</span></div>
  </body>
  <script>
    // div#foo 요소의 텍스트를 모두 취득
    // HTML 마크업은 무시된다.
    console.log(document.getElementById('foo').textContent); // Hello world!
  </script>
</html>



6. DOM 조작

새로운 노드 생성 및 추가, 삭제, 교체하는 것

6.1 innerHTML

  • setter, getter 존재

  • 참조시 : 모든 요소 노드의 HTML 마크업을 문자열로 반환함

  • 할당시 : HTML 마크업도 파싱되어 DOM에 반영됨 (보안문제 생길 수 있음)

  • 할당시마다 매번 모든 자식 제거 후 새로 생성 (느려짐)

  • 삽입 위치 지정 불가


6.2 insertAdjacentHTML

insertAdjacentHTML.js
1
Element.prototype.insertAdjacentHTML(position, DOMString);

  • 첫 번째 인자에 위치를 지정할 수 있다

  • 여전히 보안문제가 생길 수 있다


6.3 노드 생성과 추가

creat_add_node.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <body>
    <ul id="animal">
      <li>Lion</li>
    </ul>
  </body>
  <script>
    const $animal = document.getElementById('animal');

    // 1. 요소 노드 생성
    const $li = document.createElement('li');

    // 2. 텍스트 노드 생성
    const textNode = document.createTextNode('Rabbit');

    // 3. 텍스트 노드를 요소 노드의 자식 노드로 추가
    $li.appendChild(textNode);

    // 4. 요소 노드를 DOM에 추가
    $animal.appendChild($li);
  </script>
</html>

6.5 노드 삽입 및 이동, 복사, 교체, 삭제

  • .appendChild : 마지막 요소로 삽입, 이미 있는 요소를 전달하면 마지막으로 이동

  • .insertBefore : 지정한 자식 요소 앞에 삽입, 이미 있는 요소를 전달하면 지정 위치로 이동

  • .cloneNode() : 노드 복사(텍스트 노드x) 단, 인자에 true 전달시 모든 자식 노드 포함 복사

  • .replaceChild(교체요소, 교체당할요소) : 노드 교체, 제거된 노드는 DOM에서 제거

  • .removeChild() : 노드를 DOM에서 삭제, 반드시 부모 요소가 자신의 자식을 삭제해야 함



7. 어트리뷰트

7.1 attributes 조작

  • attributes 프로퍼티 : 요소의 프로퍼티 조회, 변경 가능 (DOM 프로퍼티)

  • Element.prototype.getAttribute : 조건을 만족하는 모든 요소의 프로퍼티 조회, 변경 가능 (중복 관리) (HTML 어트리뷰트)


7.2 HTML 어트리뷰트 vs DOM 프로퍼티

  • HTML 어트리뷰트 : HTML 요소의 초기 상태를 지정하는 것, 원래는 변하지 않으나 setAttribute 메소드로는 변경 가능하다(초기값 변경)

  • DOM 프로퍼티 : 사용자가 입력한 최신 상태를 관리



8. 스타일

8.1 인라인 스타일 조작

  • HTMLElement#style : 노드의 인라인 스타일 참조 및 변경

8.2 클래스 조작

  • Element#className : setter와 getter 모두 존재, class 어트리뷰트 값을 취득하거나 변경

  • Element#classList : class 어트리뷰트 값을 담은 DOMTokenList 객체를 반환(add, remove, item, contains, replace, toggle 등)


8.3 요소에 적용된 CSS 스타일 참조

  • getComputedStyle : 요소 노드에 적용되어 있는 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환 (최종적으로 적용된 스타일)

참고자료: poiemaweb.com

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
javascript
FRIENDS
ESC