DOM

seongkyun·2020년 12월 7일
0

TIL - Javascript

목록 보기
28/28

기존 블로그에 작성한 내용을 velog로 이전한 글입니다


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

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

<!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 마크업을 넣어도 문자열 취급된다.

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

<!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

Element.prototype.insertAdjacentHTML(position, DOMString);
  • 첫 번째 인자에 위치를 지정할 수 있다

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


6.3 노드 생성과 추가

<!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.4 노드 삽입 및 이동, 복사, 교체, 삭제

  • .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

profile
FrontEnd Developer

0개의 댓글