13. DOM, Query Selector

DOM(Document Object Model)

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 

그렇게 저장된 정보를 DOM Tree라고 합니다.

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘듭니다.

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다.

브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메서드를(DOM API)를 제공합니다.

1. 하나의 요소 선택

document.getElementById(id)

document.querySelector(cssSelector)

2. 여러개의 요소 선택

document.getElementsByClassName(class)

document.getElementsByTagName(tagName)

document.querySelectorAll(selector)

3. DOM Traversing (탐색)

parentNode

firstChild, lastChild

hasChildNodes()

childNodes

previousSibling, nextSibling

4. DOM Manipulation (조작)

4-1. 텍스트 노드에 접근

nodeValue, nodeName, nodeType

4-2. 어트리뷰트 노드에의 접근/수정

className, id, hasAttribute(attribute), getAttribute(attribute), setAttribute(attribute, value), removeAttribute(attribute), 

4-3. HTML 콘텐츠 조작(Manipulation)

textContent, innerText, innerHTML

4-4. DOM 조작 방식

createElement(tagName), createTextNode(text), appendChild(Node), removeChild(Node)

Reference

https://poiemaweb.com/js-dom