[TIL] JS: DOM

Document Object Model

텍스트 파일로 만들어져 있는 웹문서를 브라우저가 이해할 수 있는 구조로 구성한 것

• DOM Tree elements와 atributes를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한다. 최상위 진입점은 document이다.
• DOM API는 웹문서의 동적 변경을 위해 DOM에 접근하는 자바스크립트 객체의 집합이다.

1. DOM Query

요소에 접근하는 방법

• document.getElementById(id) id attribute로 하나의 element를 선택한다.
• document.querySelector CSS selctor를 사용하여 하나의 element를 선택한다.
• document.querySelectorAll(selector) CSS selctor를 사용하여 elements를 모두 선택한다
• document.getElementsByClassName(class) class attriubte로 여러개의 elements를 선택한다.
• document.getElementsByTagName(tagName) tag명으로 elements를 모두 선택한다.

2. DOM Traversing

요소를 탐색하는 방법

• parantNode
• .firstChild, .lastChild
• hasChildNodes() 자식 노드가 있을 대 Boolean값을 반환한다.
• childNodes 텍스트 element를 포함한 모든 자식 elements를 반환한다.
• childDren 자식요소 중 element type만 반환한다.

DOM Manipulation

1. Text Node 조작하기

• .nodeValue 텍스트 노드의 유일한 property

// 해당 텍스트 노드의 부모 요소 노드를 선택한다.
const one = document.getElementById('one');
console.dir(one); // HTMLLIElement: li#one.red

// nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.
console.log(one.nodeName); // LI
console.log(one.nodeType); // 1: Element node

// firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색한다.
const textNode = one.firstChild;

// nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.
console.log(textNode.nodeName); // #text
console.log(textNode.nodeType); // 3: Text node

// nodeValue 프로퍼티를 사용하여 노드의 값을 취득한다.
console.log(textNode.nodeValue); // Seoul

// nodeValue 프로퍼티를 이용하여 텍스트를 수정한다.
textNode.nodeValue = 'Pusan';

2. Attribute Node 조작하기

• .className attribute 값을 조작한다.
• .classList add, remove, item, toggle, contains, replace method를 제공한다.

const elems = document.querySelectorAll('li');

// className
[...elems].forEach(elem => {
  // class 어트리뷰트 값을 취득하여 확인
  if (elem.className === 'red') {
    // class 어트리뷰트 값을 변경한다.
    elem.className = 'blue';
  }
});

// classList
[...elems].forEach(elem => {
  // class 어트리뷰트 값 확인
  if (elem.classList.contains('blue')) {
    // class 어트리뷰트 값 변경한다.
    elem.classList.replace('blue', 'red');
  }
});

3. Element Node 조작하기

• textContent 텍스트 콘텐츠를 취득 또는 변경한다.
• innerHTML 해당 요소의 모든 자식 요소를 포함하는 콘텐츠를 하나의 문자열로 취득한다.

const one = document.getElementById('one');

// 마크업이 포함된 콘텐츠 취득
console.log(one.innerHTML); // Seoul

// 마크업이 포함된 콘텐츠 변경
one.innerHTML += '<em class="blue">, Korea</em>';

// 마크업이 포함된 콘텐츠 취득
console.log(one.innerHTML); // Seoul <em class="blue">, Korea</em>

마크업이 포함된 콘텐츠를 추가하는 것은 XSS(Cross-Site Scripting Attacks)에 취약하다.

• XSS 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법

4. DOM 조작하기

• createElement(tagName) 태그이름을 인자로 전달하여 요소 노드를 생성한다.
• createTextNode(text) 텍스트 노드를 생성한다.
• appendChild(Node) 생성된 노드를 DOM tree에 추가한다.

// 태그이름을 인자로 전달하여 요소를 생성
const newElem = document.createElement('li');
// const newElem = document.createElement('<li>test</li>');
// Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<li>test</li>') is not a valid name.

// 텍스트 노드를 생성
const newText = document.createTextNode('Beijing');

// 텍스트 노드를 newElem 자식으로 DOM 트리에 추가
newElem.appendChild(newText);

const container = document.querySelector('ul');

// newElem을 container의 자식으로 DOM 트리에 추가. 마지막 요소로 추가된다.
container.appendChild(newElem);

const removeElem = document.getElementById('one');

// container의 자식인 removeElem 요소를 DOM 트리에 제거한다.
container.removeChild(removeElem);