Search

36장 DOM

대분류
언어
서적
소분류
JS DeepDive
태그
DOM
노드
최종 편집 일시
2024/10/27 15:38
생성 일시
2024/02/08 00:18
14 more properties
목차

DOM

HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API
프로퍼티와 메서드를 제공하는 트리 자료구조

노드

HTML 요소와 노드 객체

HTML요소 : HTML 문서를 구성하는 개별적인 요소를 의미
HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환
HTML요소의 어트리뷰트 : 어트리뷰트 노드
텍스트 콘텍츠 : 텍스트 노드로 변환
HTML문서는 HTML 요소들의 집합으로 이루어지고 중첩관계를 소유, 이로 인해 계층적인 부자관계가 형성
이를 반영하여 HTML요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성

트리 자료구조

노드들의 계층 구조로 이루어지며 하나의 최상위 노드(루트 노드)에서 시작
리프 노드 : 자식 노드가 없는 노드
DOM == DOM 트리

노드 객체의 타입

문서 노드 (Document, HTML Document 인터페이스 상속)
DOM 트리 최상위에 존재하는 루트 노드로서 document 객체를 지침
window.document로도 참조할 수 있으며 HTML문서당 하나인 유일한 객체
요소 노드 (Element, HTMLElement 인터페이스 상속)
HTML 요소를 가리키는 객체
중첩에 의해 부자 관계를 가지고, 문서의 구조를 표현
어트리뷰트 노드 (Attr 인터페이스 상속)
HTML 요소의 어트리뷰트를 가리키는 객체
어트리뷰트가 지정된 요소 노드와 연결
(부모노드와 연결되어 있지 않고 요소 노드에만 연결이 되어 있으며, 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근 필요)
텍스트 노드 (CharacterData 인터페이스 상속)
HTML 요소의 텍스트를 가리키는 객체
문서의 정보를 표현하며, 요소 노드의 자식 노드이면서 리프 노드

노드 객체의 상속 구조

Object -> EventTarget -> Node 순서가 노드 객체의 상속 구조
노드에서 문서 노드(Document, HTML Document 인터페이스 상속), 요소 노드(Element, HTMLElement 인터페이스 상속), 어트리뷰트 노드(Attr 인터페이스 상속), 텍스트노드(CharacterData 인터페이스 상속)등으로 분할
ex) input과 같은 요소 노드는 다음과 같은 구조
Object -> EventTarget -> Node -> Element -> HTMLElement -> HTMLInputElement
프로토타입 또한 마찬가지 위 순서대로 구성되어 있고, input 요소 노드 객체가 프로토타입 체인의 가장 아래에 존재
따라서 프로토타입 체인안에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용 가능
input 요소 노드 객체의 특성
프로토타입을 제공하는 객체
객체
Object
이벤트를 발생시키는 객체
EventTarget
트리 자료구조의 노드 객체
Node
브라우저가 렌더링할 수 있는 웹 문서의 요소를 표현하는 객체
Element
웹 문서의 요소 중에 HTML 요소를 표현하는 객체
HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체
HTMLInputElement
각 객체마다 관련 기능을 제공하는 인터페이스가 존재하며 (Node, HTMLElement 등등...) 공통된 기능일 수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 프로퍼티와 메서드를 제공하는 상속 구조를 보유
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공
DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 가능

요소 노드 취득

HTML의 구조나 내용 또는 스타일을 동적으로 조작하려면 먼저 요소 노드 취득 필요
--> 요소 노드의 취득이 HTML 요소를 조작하는 시작점
이를위해 DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공

id를 이용한 요소 노드 취득 (getElementById)

Document.prototype.getElementById 메서드 사용
const $elem = document.getElementById('id');
Plain Text
복사
id는 HTML 문서 내에서 유일한 값이어야 하지만 중복되는 id값이 있는 경우, getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환
존재하지 않는 경우 null 반환.
HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과 보유
... <div id = "foo"></div> ... <script> // id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당됨. console.log(foo === document.getElementById('foo')); // true // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제 불가 delete foo; console.log(foo); // <div id = "foo"></div> </script>
HTML
복사
단 id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면, 이 전역 변수에 노드 객체가 재할당 X

태그 이름을 이용한 요소 노드 취득 (getElementsByTagName)

Document.prototype/Element.prototype.getElementsByTagName 메서드 사용
복수형 → 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환
이 객체는 유사 배열 객체이면서 이터러블
모든 요소 노드 취득
const $all = document.getElementsByTagName('*');
TypeScript
복사
Document.prototype.getElementsByTagName
DOM 전체에서 요소 노드를 탐색하여 반환
Element.prototype.getElementsByTagName
특정 요소 노드의 자손 중에서 요소 노드를 탐색하여 반환
// DOM 전체에서 탐색 const $lisFromDocument = documents.getElementsByTagName('li'); // 특정 요소 노드 자손 중에서 요소 노드 탐색 const $fruits = document.getElementById('fruits'); const $lisFromFruits = $fruits.getElementsByTagName('li');
TypeScript
복사
인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, 빈 HTMLCollection 객체를 반환

class를 이용한 요소 노드 취득 (getElementsByClassName)

Document.prototype/Element.prototype.getElementsByClassName 메서드를 사용
-> getElementsByTagName 메서드와 마찬가지로 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환
만약 인수로 전달된 class 값을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환

CSS 선택자를 이용한 요소 노드 취득 (querySelector / querySelectorAll)

Document.prototype/Element.prototype.querySelector 메서드
인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러 개인 경우 첫 번째 요소 노드만 반환
인수로 전달된 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환
인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러 발생
Document.prototype/Element.prototype.querySelectorAll 메서드 --> 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환하는데 이는 유사 배열 객체이면서 이터러블
인수로 전달된 CSS 선택자를 만족시키는 요소가 존재하지 않는 경우 빈 NodeList 객체를 반환
인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러 발생
문서의 모든 요소 취득
const $all = document.querySelectorAll('*');
TypeScript
복사
CSS 선택자 문법을 사용하는 querySelector, querySelectorAll 메서드는 getElementById, getElementBy*** 메서드 보다 다소 느리지만 좀 더 구체적인 조건과 일관된 방식으로 요소를 취득할 수 있다는 장점 보유
따라서 id의 경우 getElementById 메서드를 사용
그 외의 경우 querySelector, querySelectorAll 메서드 사용을 권장

특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드를 사용
// apple이 ul id='fruits' 안의 li class='apple'이라고 가정 const $apple = document.querySelector('.apple'); console.log($apple.matches('#fruits > li.apple')); //true console.log($apple.matches('#fruits > li.banana')); // false
TypeScript
복사

HTMLCollection과 NodeList

DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체
둘다 유사 배열 객체이면서 이터러블이다. 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체
NodeList의 대부분은 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.
HTMLCollection
getElementsByTagName/ByClassName 메서드가 반환하는 HTMLCollection 객체 : 노드의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체
const $elem = document.getElementsByClassName('red'); console.log($elems); // HTMLCollection(3) [li.red, li.red, li.red] // HTMLCollection 객체의 모든 요소의 class 값을 'blue'로 변경한다. for(let i = 0; i<$elems.length; i++) { $elems[i].className = 'blue'; } console.log($elmes); // HTMLCollection(1) [li.red]
TypeScript
복사
첫 번째 반복 때, elems[0]blue로 변경되면서 HTMLCollection 객체에서 제외되고, i 가 1이되면서 그 다음 요소는 3번째 요소를 가리키기 때문에 2번째 li는 변경되지 않는다.
이 문제 해결법
for문 역방향
객체가 남아있지 않을 때까지 while사용하여 무한 반복
HTMLCollection 객체를 사용하지 않고 [...$elems]와 같이 배열로 변환해서 사용
NodeList
HTMLCollection 객체의 부작용을 해결하기 위해 querySelectorAll 메서드를 사용하여 NodeList 객체를 반환하게 만듦 --> 실시간으로 노드 객체의 상태를 반영하지는 않는다.
이 NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용 가능. 대부분의 이 객체는 non-live이지만, childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요
const $fruits = document.getElementById('fruits'); // fruits라는 id를 가진 ul요소 아래의 모든 li요소들은 childNodes 이다. // 이 노드객체는 live 객체로 동작! const {childNodes} = $fruits;
TypeScript
복사
노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장

노드 탐색

Node.prototypeparentNode, previousSibling, firstChild, childNodes 프로퍼티 제공
Element.rptotoypepreviousElementSibling, nextElementSibling, children 프로퍼티 제공
노드 탐색 프로퍼티의 경우 모두 접근자 프로퍼티 이며, setter없이 getter만 존재

공백 텍스트 노드

html 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성하는데 이를 공백 텍스트 노드

자식 노드 탐색

Node.prototype -> childNodes, firstChild, lastChild가 있으며 이 프로퍼티가 반환한 NodeList에는 요소노드뿐만 아니라 텍스트 노드도 포함되어 있을 수 있음. (공백 텍스트 노드 등등..)
Element.prototype -> children, firstElementChild, lastElementChild는 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함 X

자식 노드 존재확인

Node.prototype.hasChildNodes 메서드 이용.
존재하면 true, 아니면 false를 반환
자식 노드 중에 텍스트 노드가 아닌 노드가 있는지 확인하기 위해서는 children.length or Element 인터페이스의 childElementCount 프로퍼티를 사용

요소 노드의 텍스트 노드 탐색

요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근 가능 (첫 번째 자식 노드 반환)
firstChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드임.

부모 노드 탐색

Node.prototype.parentNode 프로퍼티를 사용
텍스트 노드는 DOM 트리의 최종단노드인 리프 노드이므로 부모노드가 텍스트 노드인 경우 X

형제 노드 탐색

어트리뷰트 노드의 경우 요소 노드와 연결되어 있지만 부모 노드가 같지 않기 때문에 반환 X
오로지 텍스트 노드와 요소 노드만 반환
Node.prototype --> previousSibling, nextSibling (요소 or 텍스트 노드)
Element.prototype --> previousElementSibling, nextElementSibling (요소 노드만)

노드 정보 취득

Node.prototype.nodeType
노드 객체의 종류, 노드 타입을 나타내는 상수를 반환
Node.ElEMENT_NODE: 요소 노드 타입을 나타내는 상수 1 반환
Node.TEXT_NODE: 텍스트 노드 타입을 나타내는 상수 3을 반환
Node.DOCUMENT_NODE: 문서 노드 타입을 나타내는 상수 9를 반환
Node.prototype.nodename
노드의 이름을 문자열로 반환
요소 노드: 대문자 문자열 태그 이름("UL", "LI"등)을 반환
텍스트 노드: 문자열 "#text"를 반환
문서 노드: 문자열 "#document"를 반환

요소 노드의 텍스트 조작

nodeValue

Node.prototype.nodeValue 프로퍼티는 settergetter 모두 존재하는 접근자 프로퍼티 --> 참조와 할당이 가능
nodeValue는 노드 객체의 값을 반환하는데 이 값이란 텍스트 노드의 텍스트를 의미하며, 문서 노드나 요소 노드의 nodeValue로 참조 시 null을 반환
요소 노드의 텍스트를 변경하기 위한 순서
1.
텍스트 변경할 요소 노드 취득 후 firstChild 프로퍼티를 사용하여 탐색
2.
탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경

textContent

Node.prototype.textContent 프로퍼티는 setter, getter 모두 존재하는 접근자 프로퍼티. -> 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경
요소 노드의 콘텐츠 영역(시작 태그와 종료 태그 사이)내의 텍스트를 모두 반환하며, HTML 마크업은 무시
어떤 요소 안에 자식 요소 노드가 많다 --> textContent 사용
텍스트만 존재한다면 firstChild.nodeValuetextContent 프로퍼티는 같은 결과를 반환한다.
textContent를 사용하여 문자열을 할당한다면, 모든 자식 노드가 제거 되고 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식하기 때문에 마크업 파싱 X
textContent와 비슷한 프로퍼티인 innerText을 사용하지 말아야 하는 이유
CSS에 순종적이어서 CSS에 의해 비표시로 자정된 요소 노드의 텍스트를 반환X.
CSS를 고려해야 하므로 textContent 프로퍼티보다 느림.

DOM 조작

DOM 조작은 리플로우와 리페인트를 발생하는 원인이 되므로 성능 최적화를 위해 주의해서 다루어야 함.

innerHTML

Element.prototype.innerHTML 프로퍼티
innerHTML로 참조 시, 모든 HTML 마크업을 문자열로 반환하여 참조
innerHTML로 문자열을 할당하면 모든 자식 노드가 제거되고, 할당한 문자열에 포함되어 있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영.
innerHTML로 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하게 되면 크로스 사이트 스크립팅 공격에 취약
HTML5는 프로퍼티로 삽입된 script 요소 내의 JS 코드를 실행하지 않는다.
HTML 새니티제이션
사용자로 부터 입력 받은 데이터에 의해 발생할 수 있는 크로스 사이트 스크립팅 공격을 예방하기 위해 잠재적 위험을 제거하는 기능
innerHTML의 또 다른 단점으로 새로운 요소를 추가 시, 기존 노드까지 제거한 후 처음부터 새롭게 노드를 생성하여 DOM에 반영하여 효율적이지 않다는 점이다.
또한 삽입될 위치를 지정할 수 없다는 단점도 존재

insertAdjacentHTML 메서드

Element.prototype.insertAdjacentHTML(position, DOMString) 메서드 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.
두 번째 인수로 전달한 HTML 마크업 문자열을 파싱하여 그 결과를 위치를 고려해 DOM에 반영한다.
인수는 beforebegin, afterbegin, beforeend, afterend로 4가지가 있다.
innerHTML 프로퍼티보다 효율적이고 빠르지만 HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅 공격에 취약하다.

노드 생성과 추가

1.
요소 노드 생성Document.prototype.createElement(tagName) 메서드는 요소 노드를 생성하여 반환한다.
const $li = document.createElement('li'); console.log($li.childNodes); // NodeList []
Plain Text
복사
2.
텍스트 노드 생성
const textNode = document.createTextNode('Banana');
Plain Text
복사
3.
텍스트 노드를 요소 노드의 자식 노드로 추가
li.appendChild(textNode);
Plain Text
복사
// 텍스트 노드를 생성하여 요소 노드의 자식 노드로 추가 li.appendChild(document.createTextNode('Banana')); // $li 요소 노드에 자식 노드가 하나도 없는 위 코드와 동일하게 동작한다. li.textContent = 'Banana';
Plain Text
복사
자식 노드가 하나도 없는 경우 윗 방법보다 textContent 프로퍼티 사용이 더 간편하게 만들 수 있다.
4.
요소 노드를 DOM에 추가
$fruits.appendChild($li);
TypeScript
복사
DOM에 한번 추가하므로 DOM은 한 번 변경된다. --> 리플로우와 리페인트가 실행된다.

복수의 노드 생성과 추가

따로따로 노드를 생성해서 추가하는 경우 DOM이 그때마다 변경되어 리플로우와 리페인트가 실행된다. --> 비효율적
컨테이너를 사용하면 1번만 리플로우와 리페인트가 실행되지만 원치않는 요소가 들어가기 때문에 바람직하지 않다.
DocumentFragment 노드를 통해 해결!
-> 리플로우와 리페인트 한 번만 실행
const $fragmnet = document.createDocumentFragment(); ... $fragment.appendChild(만든요소); $fruits.appendChild($fragment);
TypeScript
복사

노드 삽입

마지막 노드로 추가
Node.prototype.appendChild 메서드를 사용
지정한 위치에 삽입
Node.prototype.insertBefore(newNode, childNode) 메서드를 이용하여 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다.
두 번째 인수로 전달받은 노드는 insertBefore를 호출한 노드의 자식이어야 한다. 그렇지 않은경우 DOMException 에러가 발생한다.
두 번째 인수가 null 이면 appendChild 메서드처럼 동작하여 마지막에 추가된다.

노드 이동

이미 존재하는 노드를 appendChild 또는 insertBefore 메서드를 사용하여 DOM에 다시 추가 시, 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다. --> 노드 이동

노드 복사

Node.prototype.cloneNode([deep: true | false]) 메서드는 노드의 사본을 생성하여 반환한다.
true --> 모든 자손 노드가 포함된 사본 생성(깊은 복사)
false --> 노드 자신만의 사본 생성(얕은 복사)
얕은 복사로 생성된 요소 노드는 자손 노드를 복사하지 않으므로 텍스트 노드가 없다.

노드 교체

Node.prototype.replaceChild(newChild, oldChild) 메서드를 사용한다.

노드 삭제

Node.prototype.removeChild(Child) 메서드를 사용한다.
인수로 전달한 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야 한다.

어트리뷰트

어트리뷰트 노드와 attributes 프로퍼티

어트리뷰트 이름 = '어트리뷰트 값' 형식으로 정의한다.
input 요소에만 사용 가능한 어트리뷰트 --> type, value, checked
HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트가 어트리뷰트 노드로 변환되어 요소 노드와 연결되며, 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다.
모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다.
따라서 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있다.
attributes 프로퍼티는 getter만 존재하는 접근자 프로퍼티이며 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다.

HTML 어트리뷰트 조작

Element.prototype.getAttribute/setAttribute 메서드를 사용하여 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다.
어트리뷰트가 존재하는 지 확인 --> Element.prototype.hasAttribute(attributeName)
특정 HTML 어트리뷰트 삭제 --> Element.prototype.removeAttribute(attributeName)

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

DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있는데 DOM 프로퍼티는 settergetter 모두 존재하는 프로퍼티이기 때문에 참조와 변경이 가능하다.
HTML 어트리뷰트의 역할을 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.
요소 노드는 상태를 가지고 있고 예를들어 Input 요소에 사용자가 값을 입력하면 처음 지정한 초기 상태와 최신 상태로 나누어져서 관리
즉, 요소 노드는 2개의 상태, 초기 상태와 최신 상태를 관리하며, 초기 상태는 어트리뷰트 노드가, 요소 노드의 최신 상태는 DOM 프로퍼티가 관리
어트리뷰트 노드
-> HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리한다.
getAttribute 메서드로 취득한 값은 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태의 값이다!(사용자에 의해 값이 변하지 않으므로 결과는 언제나 동일!)
DOM 프로퍼티
사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티가 관리한다. --> 사용자 입력에 의한 상태 변화에 반응하여 언제나 최신상태 유지
HTML 어트리뷰트는 초기값, DOM 프로퍼티는 최신 상태를 관리하지만 사용자 입력에 의한 상태 변화와 관련이 없는 id 어트리뷰트와 id 프로퍼티는 항상 동일한 값을 유지한다. --> id 프로퍼티와 id 어트리뷰트는 항상 동일한 값으로 연동되기 때문에 어느 한쪽이 바귀면 그 바뀐 값으로 다른 한쪽도 바뀌게 된다.
HTML 어트리뷰트 DOM 프로퍼티의 대응 관계: 대부분의 HTML 어트리뷰트는 이름이 동일한 DOM 프로퍼티와 1:1로 대응한다.
DOM 프로퍼티 값의 타입: getAttribute 메서드로 취득한 값은 언제나 문자열이지만 DOM 프로퍼티로 취득한 값은 문자열이 아닐수도 있음(checkbox의 checked 어트리뷰트 값)

data 어트리뷰트와 dataset 프로퍼티

data 어트리뷰트와 dataset 프로퍼티를 사용하여 사용자 정의 어트리뷰트와 JS 간에 데이터 교환이 가능하다.
data- 접두사 다음에 임의이 이름을 붙여 사용하는데 그 값은 HTMLElement.dataset 프로퍼티로 취득이 가능하다.
-> DOMStringMap 객체 반환
이 객체는 data 어트리뷰트의 data- 뒤의 이름을 카멜 케이스로 변환한 프로퍼티를 가지고 있다.
data 접두사 다음에 존재하지 않는 이름을 키로 사용하여 dataset 프로퍼티에 값을 할당시, HTML 요소에 data 어트리뷰트가 추가된다. 카멜케이스 --> 케밥케이스로 자동 변경되어 추가!

스타일

인라인 스타일 조작

HTMLElement.prototype.style 프로퍼티로 인라인 스타일을 취득하거나 추가 또는 변경할 수 있다.
프로토타입 참조 document.querySelector('div').style
-> CSSStyleDeclaration 타입의 객체를 반환하는데 이 객체의 프로퍼티는 카멜케이스(backgroundColor, 원래 css는 케밥케이스)를 따르고 값 할당 시 css 프로퍼티가 인라인 스타일로 HTML 요소에 추가되거나 변경됨
단위 지정이 필요한 CSS 프로퍼티 값은 반드시 단위 지정이 필요하다.

클래스 조작

class 어트리뷰트에 대응하는 DOM 프로퍼티 --> className, classList
className
참조 시, 값을 문자열로 반환, 할당하면 class 어트리뷰트 값을 할당한 문자열로 변경 --> 문자열을 반환하여 공백으로 구분된 여러 개의 클래스 반환하는 경우 다루기가 불편하다.
classList
DOMTokenList 객체를 반환한다.(유사배열 객체이면서 이터러블)
다양한 메서드를 제공 add, remove, item(index), contains, replace, toggle(className[,force]), forEach, entries, keys, values, supports 등등..

요소에 적용되어 있는 CSS 참조

style 프로퍼티는 인라인만, getComputedStyle(element[, pseudo]) 메서드는 첫 번째 인수로 전달한 요소 노드에 적용되어 있는 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환
평가된 스타일: 링크 스타일, 임베딩 스타일, 인라인 스타일, JS에서 적용한 스타일, 상속된 스타일, 기본 스타일 등 모든 스타일이 조합되어 최종적으로 적용된 스타일
2번째 인수로 :after, :before와 같은 의사 요소를 지정하는 문자열 전달 가능 --> 의사 요소인 경우에만 사용하며 일반 요소인 경우 2번째 인수는 생략한다.

DOM 표준

원래는 W3C, WHATWG 단체가 공통된 표준을 만들었지만 서로 다른 결과물을 내놓기 시작하여 2018년 4월 부터 구글, 애플, MS, 모질라로 구성된 4개의 주류 브라우저 벤더사가 주도하는 WHATWG이 단일 표준을 내놓기로 두 단체가 합의함
DOM --> 4개의 레벨(버전)이 있다.