20210716 JavaSciprt DeepDive 14 : DOM, 요소 노드 취득, HTMLCollection, NodeList, 텍스트 노드, 노드 탐색, texContent, XXS, 노드 조작, 어트리뷰트, DOM 프로퍼티, 스타일, 클래스 조작

JavaScript Deep Dive 14

📄 용어 및 중요사항 정리

DOM

• DOM(Document Object Model):
  • HTML 문서의 계층적 구조와 정보를 표현
  • HTML 요소를 제어할 수 있는 API로 프로퍼티와 메서드를 제공하는 노드 객체들로 구성된 트리 자료 구조

• HTML 요소: HTML 문서를 구성하는 개별적인 요소
  • HTML 요소 -(JS엔진에 의한 파싱)-> 요소 노드 객체
  • HTML 어트리뷰트 -(파싱)-> 어트리뷰트 노드
  • HTML 요소의 콘텐츠 -(파싱)-> 텍스트 노드
    • 시작태그
    • 어트리뷰트 이름
    • 어트리뷰트 값
    • 콘텐츠
    • 종료태그
  • HTML 요소의 중첩 관계 특성으로 다른 요소로 포함 가능함 -> 모든 노드들이 트리 자료 구조로 구성

• 트리 자료구조: 부모노드, 자식노드로 구성되어 노드들의 계층 구조(비선형 자료구조)로 이뤄짐
  • 비선형 자료구조: 하나의 자료 뒤에 여러개의 자료가 존재할 수 있는 자료구조
  • 루트노드: 최상위 노드(부모 노드가 없음)
  • 리프노드: 자식 노드가 없는 노드

노드 객체의 타입

• 노드 객체에는 12개의 노드 타입이 있음
• 문서노드: DOM 트리의 최상위에 존재하는 루트 노드로 document 객체를 가리킴
  • document객체는 HTML 문서에서 유일한 객체로 전역 객체 window의 document 프로퍼티에 바인딩 되어 있음
    • 브라우저 환경의 모든 JS코드는 하나의 전역 객체 window를 공유함
  • DOM 트리의 노드들에 접근하는 진입점 역할
• 요소 노드: HTML 요소를 가리키는 객체
  • 요소노드는 중첩에 의해 부자관계를 통해 정보를 구조화하여 문서의 구조를 표현함
• 어트리뷰트 노드: HTML 요소의 어트리뷰트를 가리키는 객체
  • 어트리뷰트 노드는 해당 요소 노드와 연결되어 있음
  • 어트리뷰트의 부모노드가 없기에 요소노드의 형제노드는 아님
• 텍스트 노드: HTML 요소의 텍스트를 가리키는 객체
  • 문서 정보를 표현 함
  • 요소 노드의 자식 노드이자 리프 노드 임(최종단)

노드 객체의 상속 구조

• DOM을 구성하는 노드 객체는 DOM API를 통해 자신의 부모, 형제, 자식 탐색 가능, 자신의 어트리뷰트와 텍스트를 조작 가능
• DOM을 구성하는 노드 객체는 호스트 객체이자, JS 객체이므로 프로토타입에 의한 상속 구조를 갖음
• 개발자 도구의 Elements의 Properties 패널에서 상속 구조 확인 가능
• 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속 받음
  • Document, HTMLDocument 인터페이스 - (상속) -> 문서 노드
  • Attr 인터페이스 - (상속) -> 어트리뷰트 노드
  • CharacterData 인터페이스 - (상속) -> 텍스트 노드
  • Element, 세분화된 HTMLhtmlElement, HTMLHeadElement, HTMLBodyElement, HTMLUListElement 등의 인터페이스 - (상속) -> 요소 노드
• 상속 구조
  • Object (객체)
  • -> EventTarget (이벤트를 발생시키는 객체)
  • -> Node (트리 자료구조의 노드 객체)
  • -> Element (브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML,XML,SVG)를 표현하는 객체)
  • -> HTMLElement (웹 문서의 요소 중에서 HTML요소를 표현하는 객체)
  • -> HTML특정Element (HTML 요소중에서 특정 요소를 표현하는 객체)
  • -> 특정 요소 노드 객체

요소 노드 취득

• Document.prototype.getElementById(id어트리뷰트 값) : id 값으로 요소 노드 취득
  • id 어트리뷰트 값을 갖는 하나의 요소 노드 탐색 반환
  • 문서 노드인 document를 통해 호출
  • HTML 요소에 id어트리뷰트는 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고, 해당 노드 객체가 할당됨
  • id는 HTML 문서에서 유일한 값이어야 함(공백문자로 여러개 가질 수 없음)
    • 중복시, 첫 번째 요소 노드만 반환 (이미 선언되어 있으면 전역 변수에 노드 객체 재할당 X)
    • HTML요소가 존재하지 않는 경우 null 반환

• Document.prototype/Element.prototype.getElementsByTagNames(태그 이름) : 태그 이름으로 요소 노드 취득
  • 태그 이름을 갖는 모든 요소 노드들을 탐색하여 HTMLCollection 객체(여러 개의 요소노드 객체를 갖는 DOM 컬렉션) 반환
    • HTMLCollection은 유사 배열 객체이면서 이터러블 임
    • 해당 태그 이름의 요소가 존재하지 않는 경우 빈 HTMLCollection 객체 반환
  • Element.prototype의 경우에는 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환

• Document.prototype/Element.prototype.getElementsByClassName(class 어트리뷰트 값): 클래스 값으로 요소 노드 취득
  • class 값을 갖는 모든 요소 노드들을 탐색하여 HTMLCollection 객체(여러 개의 요소노드 객체를 갖는 DOM 컬렉션) 반환
    • 해당 태그 이름의 요소가 존재하지 않는 경우 빈 HTMLCollection 객체 반환
  • Element.prototype의 경우에는 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환

• Document.prototype/Element.prototype.querySelector(CSS 선택자): CSS 선택자를 만족시키는 하나의 요소 노드 취득
  • 만족시키는 요소 노드가 여러 개인 경우 첫번째 요소 노드만 반환
  • 만족시키는 요소 노드가 존재하지 않는 경우 null 반환
  • 선택자가 문법에 맞지 않는 경우 DOMException 에러 발생
  • 선택자 정리
    • 전체 선택자 (*)
    • 태그 선택자 (태그이름)
    • id 선택자 (#)
    • class 선택자 (.)
    • 어트리뷰트 선택자([type=어트리뷰트])
    • 후손 선택자 (A B)
    • 자식 선택자 (A > B)
    • 인접 형제 선택자 (A + B)
    • 일반 형제 선택자 (A ~ B)
    • 가상 클래스 선택자 (A:상태)
    • 가상 요소 선택자 (A::before)

• Document.prototype/Element.prototype.querySelectorAll(CSS 선택자) : CSS 선택자를 만족시키는 모든 요소 노드 취득
  • 만족시키는 요소 노드가 여러 개인 경우 모든 요소 노드 객체를 갖는 NodeList 객체를 반환
  • NodeList 객체는 유사 배열 객체이면서 이터러블 임
    • 만족시키는 요소가 없는 경우, 빈 NodeList 객체 반환
    • 선택자가 문법에 맞지 않는 경우 DOMException 에러 발생
  • querySelector, querySelectorAll의 경우 다른 메서드 보다 느리지만, 구체적인 조건으로 요소 노드 취득이 가능하다는 장점이 있음

• Element.prototype.matches(CSS선택자) : CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인
  • 이벤트 위임을 사용할 때 유용

HTMLCollection, NodeList

• DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬랙션 객체
• 둘다, 유사 배열 객체이면서 이터러블로 for...of, 스프레드 문법, Array.from 사용하여 간단히 배열로 변환 가능
• HTMLCollection은 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 객체임
  • NodeList는 아님

• HTMLCollection
  • getElementsByTagName, getElementsByClassName 메서드가 반환하는 객체
  • 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체임
    • 순회 사용시 순회 과정에서 처리하면 바로 상태를 변경시키기 때문에 주의 해야함(담아온 객체에 바로 반영어 순회중에도 객체가 변함)
    • HTMLCollection을 처리 할때는 배열에 풀어 배열 형태로 만들어 배열 고차 함수로 순회할 것을 추천

• NodeList
  • querySellectorAll 메서드가 반환하는 객체로 실시간으로 노드 객체의 상태 변경을 하지 않는 객체임
  • 순회시 NodeList.prototype.forEach 메서드 상속받아 사용 가능
  • 단, childNodes 프로퍼티가 반환하는 NodeList 객체는 실시간으로 노드 객체 상태 변경 반영함
    • 배열에 풀어 배열 형태로 만들어 배열 고차 함수로 순회할 것을 추천

노드 탐색

• 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드등을 탐색하는 것
  • 노드 탐색 프로퍼티 (getter 접근자 프로퍼티로, 읽기 전용이고 값 할당 불가)
  • Node, Element 인터페이스가 트리 탐색 프로퍼티를 제공
  • Node.prototype -> parentNode, previousSibling, firstChild, childNodes 프로퍼티
  • Element.prototype -> previousElementSibling, nextElementSibling, children 프로퍼티

• 공백 텍스트 노드
  • HTML 사이의 스페이스, 탭, 개행 등의 공백 문자는 텍스트 노드를 생성함

• 자식 노드 탐색
  • Node.prototype.childNodes : 자식 노드를 모두 탐색하여 NodeList에 담아 반환(텍스트 노드도 포함되어 있음)
  • Element.prototype.children : 자식 노드 중에서 요소 노드만 탐색하여 HTMLCollection에 담아 반환(텍스트 노드 불포함)
  • Node.prototype.firstChild : 첫번째 자식 노드를 반환(텍스트 or 요소 노드임)
  • Node.prototype.lastChild : 마지막 자식 노드를 반환(텍스트 or 요소 노드임)
  • Element.prototype.firstElementChild : 첫번째 자식 요소 노드 반환(요소 노드만 반환)
  • Element.prototype.lastElementChild : 마지막 자식 요소 노드 반환(요소 노드만 반환)

• 자식 노드 존재 확인
  • Node.prototype.hasChildNodes : 자식 노드가 존재하면 true, 아니면 false 반환(텍스트 노드 포함)
  • Element.prototype.children.length 프로퍼티 (텍스트 노드 불포함)
  • Element.prototype.childElementCount 프로퍼티 (텍스트 노드 불포함)

• 부모 노드 탐색
  • Node.prototype.parentNode 프로퍼티 (부모노드는 텍스트 노드 일 수 없음)

• 형제 노드 탐색
  • Node.prototype.previousSibling : 부모 노드가 같은 형제노드 중 자신의 이전 형제 노드 반환(텍스트 노드 포함)
  • Node.prototype.nextSibling : 부모 노드가 같은 형제노드 중 자신의 이후 형제 노드 반환(텍스트 노드 포함)
  • Element.prototype.previousElementSibling : 부모 노드가 같은 형제노드 중 자신의 이전 형제 요소 노드를 탐색 반환(텍스트 노드 X)
  • Element.prototype.nextElementSibling : 부모 노드가 같은 형제노드 중 자신의 이후 형제 요소 노드를 탐색 반환(텍스트 노드 X)

노드 정보 취득

• Node.prototype.nodeType : 노드 타입을 나타내는 상수 반환
  • Node.ELEMENT_NODE: 요소 노드 타입 상수 1
  • Node.TEXT_NODE: 텍스트 노드 타입 상수 3
  • Node.DOCUMENT_NODE: 문서 노드 타입 상수 9

• Node.prototype.nodeName: 노드 이름을 문자열로 반환
  • 요소노드 -> 대문자 문자열로 태그 이름 반환
  • 텍스트 노드 -> #text 반환
  • 문서노드 -> #document 반환

요소 노드의 텍스트 조작

• Node.prototype.nodeValue 프로퍼티 : 노드 객체의 값(텍스트 노드의 텍스트)을 반환
  • setter, getter 존재하는 접근자 프로퍼티 (할당, 참조 모두 가능)
  • 텍스트 노드가 아닌 노드에 nodeValue 프로퍼티를 참조하면 null 반환
  • 텍스트 노드의 nodeValue 프로퍼티에 값 할당시 텍스트를 변경할 수 있음

• Node.prototype.textContent 프로퍼티 : 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경함
  • setter, getter 존재하는 접근자 프로퍼티 (할당, 참조 모두 가능)
  • 노드 구조를 무시하고, 해당 노드 아래로 모두 텍스트를 취함
  • 텍스트 노드가 아닌 노드에 nodeValue 프로퍼티를 참조하면 null 반환
  • textContent에 값을 할당하면, 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가됨
    • HTML 마크업을 text로 할당해도 파싱되지 않고, 문자열로 취급됨
  • innerText 프로퍼티 : CSS에의해 visibility: hidden으로 된 요소노드의 텍스트를 반환하지 않음
    • 그리고 textContetn 보다 느림

DOM 조작

• DOM 조작 : 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것
  • DOM 조작시 새로운 노드 추가, 삭제 되면서 리플로우와 리페인트가 발생하므로 주의해야함

• Element.prototype.innerHTML 프로퍼티 : 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환함
  • setter, getter 존재하는 접근자 프로퍼티 (할당, 참조 모두 가능)
    • textContent 프로퍼티는 HTML 마크업을 무시하고 텍스트만 반환
    • innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열을 반환
  • innerHTML 프로퍼티에 문자열 할당시 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함된 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영
  • 단점:
    • += 연산자를 통해서 계속 추가한다고 해도, 기존의 있던 것도 모두 제거하고 다시 생성함 -> 비효율적
    • 삽입될 새로운 요소의 위치 지정 불가함
  • XXS(크로스 사이트 스크립팅 공격)
    • 사용자로 부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약함
      • HTML5의 경우 innerHTML에 삽인된 script 요소 내의 JS 코드는 실행하지 않음
      • 하지만, 에러 이벤트를 강제로 발생시켜 자바스크립트 코드가 실행되도록 할 수 있음
  • HTML 새니티제이션(HTML sanitization) :
    • 크로스 사이트 스크립팅 공격 예방을 위해 잠재적 위험 제거 기능
    • DOMPurify 라이브러리 사용 권장

• Element.prototype.insertAdjacentHTML(position, DOMString)
  • 기존 요소를 제거하지 않으면서 위치를 지정해서 새로운 요소 삽입
  • position : 'beforebegin', 'afterbegin', 'beforeend', 'afterend'
    • 해당 요소 시작 태그와 종료 태그를 기준으로 함
  • DOMString : 추가할 HTML 마크업 문자열

노드 조작

생성

• Document.prototype.createElement(tagName) : 요소 노드를 생성하여 반환
  • 요소 노드를 생성할 뿐 DOM에 추가하진 않음
• Document.prototype.createTextNode(text) : 텍스트 노드를 생성하여 반환
  • 텍스트 노드를 생성할 뿐 요소 노드의 자식 노드로 추가하진 않음

추가

• Node.prototype.appendChild(childNode) : 호출한 노드의 마지막 자식 노드로 인수로 전달한 노드를 추가함
  • 생성된 텍스트 노드를 요소노드 자식으로 추가하는 것은 textContent 프로퍼티로 하는 것이 간편함
  • 생성된 요소 노드를 DOM으로 연결된 요소의 자식으로 추가하면 DOM 트리에 추가되어 연결됨
  • 다수의 요소 노드를 DOM으로 연결시
    • 매번 생성해서 바로 DOM으로 추가하면, 그 추가하는 횟수 만큼 리플로우와 리페인트가 실행됨
    • Document.prototype.createDocumentFragment() : 비어있는 DocumentFragment 노드를 생성하여 반환함
      • DocumentFragment 노드를 생성하여 DocumentFragment노드에 추가할 여러 노드를 구현해 놓고, DOM으로 1번만에 연결함
        • DocumentFragment 노드는 Dom과 연결시 자신은 제거됨
• Node.prototype.insertBefore(newNode, childNode): newNode를 childNode의 앞에 삽입함
  • childNode 인수: 두번째 인수의 노드는 반드시 insertBefore 메서드를 호출한 노드의 자식 노드이어야 함
    • childNode가 null이면 insertBefore를 호출한 노드의 마지막 자식 노드로 추가됨 (appenchild 처럼)

이동

• 이미 존재하는 노드를 appendChild 또는 insertBefore 사용하여 추가하면 새로운 위치로 이동함(기존의 위치에서 제거하고)

복사

• Node.prototype.cloneNode(deep) : 호출한 노드의 사본을 생성하여 반환
  • deep: true(노드를 모든 자손 노드 포함된 사본 생성), false or 생략(노드 자신만의 사본을 생성)

교체

• Node.prototype.replaceChild(newChild, oldChild) : 자신을 호출 노드의 자식 노드를 다른 노드로 교체
  • newChild : 교체할 새로운 노드
  • oldChild : 이미 존재하는 교체될 노드 (replaceChild를 호출한 노드의 자식 노드이어야 함)

삭제

• Node.prototype.removeChild(child) : 호출한 노드에서 전달한 child노드를 삭제함
  • child : 제거할 노드(removeChild를 호출한 노드의 자식 노드이어야 함)

어트리뷰트

• 어트리뷰트 : HTML 요소의 동작 제어를 위한 추가적인 정보를 제공함

  • 어트리뷰트 이름="어트리뷰트 값" 형식으로 정의
  • 글로벌 어트리뷰트 : id, class, style, title, lang, tabindex, draggble, hidden 등
  • 이벤트 핸들러 어트리뷰트 : onclikc, onchange, onfocus, onblur, oninput, onkeypress, onkeydown, onkeyup, onmouseover, onsubmit, onload 등
  • 특정 어트리뷰트 :
    • type, value, cheked -> input 요소에서만 사용
  • HTML 요소의 어트리뷰트 -(파싱)-> 어트리뷰트 노드
  • 어트리뷰트 값은 항상 문자열 임

• Eleement.prototype.attributes 프로퍼티
  • 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체 반환
  • getter만 존재하는 읽기 전용임
  • 요소 노드의 attributes 프로퍼티의 어트리뷰트 노드들이 관리됨
• Element.prototype.hasAttribute(attributeString)
  • 요소 노드에 해당 어트리뷰트가 있는지 확인
• Element.prototype.removeAtrribute(attributeString)
  • 요소 노드에 해당 어트리뷰트 삭제

• 어트리뷰트 노드 : HTML 요소의 초기 상태(초기 값)의 어트리뷰트를 어트리뷰트 노드에서 관리
  • Element.prototype.getAttribute(attributeString) :
  • Element.prototype.setAttribute(attributeString, attributeValue) :
    • 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 초기값 취득 또는 변경 가능

• DOM 프로퍼티:
  • 사용자가 입력한 HTML 어트리뷰트 최신 상태의 값을 관리(요소 노드의 프로퍼티로 각 어트리뷰트에 대한 프로퍼티가 있음)
  • setter, getter 모두 존재하는 접근자 프로퍼티 임
    • 최신 상태 값을 변경하는 것으로, 기존 HTML 지정 값은 변하지 않음
    • 사용자 입력과 관련된 어트리뷰트만 최신 상태 값을 가짐

• DOM 프로퍼티 vs attributes프로퍼티의 어트리뷰트 노드
  • 요소 노드의 초기 상태 -> 어트리뷰트 노드
  • 요소 노드의 최신 상태 -> DOM 프로퍼티가 관리

• DOM 프로퍼티와 HTML 어트리뷰트의 대응 관계
  • id 어트리뷰트 - id 프로퍼티 : 항상 1:1 대응, 동일 값 유지
  • input value 어트리뷰트 - value 프로퍼티 : 1:1 대응, 서로 값은 다를 수 있음
  • class 어트리뷰트 - className, classList 프로퍼티
  • td요소 colspan 어프리뷰트 대응 프로퍼티 X
  • textContent 프로퍼티 대응 어트리뷰트 X
  • 어트리뷰트 이름 대소문자 구분X / 프로퍼티 키 = 카멜케이스
  • DOM 프로퍼티 값은 문자열이 아닐수 있음

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

• data 어트리뷰트와 data프로퍼티를 통해서 HTML과 JS 간의 데이터 교환 가능

• data 어트리뷰트
  • 'data-이름' 형식으로 어트리뷰트 이름을 사용함

• HTMLElement.dataset 프로퍼티 : data 어트리뷰트 값 취득 가능
  • DOMStringMap 객체 반환 (HTML 요소의 data 어트리뷰트에 따른 모든 data 프로퍼티를 담고 있음)

• data 프로퍼티
  • data 어트리뷰트에 대응하여, 카멜케이스로 만들어진 프로퍼티
    • data 어트리뷰트의 값 취득 및 변경 가능
    • data 어트리뷰트에 존재하지 않는 이름을 키로 사용하여 dataset 프로퍼티에 값 할당시 동적으로 data 어트리뷰트가 추가됨(케밥 케이스 형태로 어트리뷰트가 추가됨)

스타일

• HTMLElement.prototype.style 프로퍼티 : 요소 노드의 인라인 스타일을 취득, 추가, 변경
  • setter, getter 모두 존재하는 접근자 프로퍼티
  • CSSStyleDeclaration 타입 객체 반환
  • CSSStyleDeclaration 객체
    • 다양한 CSS 프로퍼티에 대응하는 프로퍼티로 구성됨
    • CSSStyleDeclaration 객체의 프로퍼티는 카멜 케이스 사용 (케밥 케이스 사용시 대괄호 사용)
    • CSSStyleDeclaration 객체의 프로퍼티 값은 항상 단위를 붙여야함
  • CSS 프로퍼티 :
    • 해당 프로퍼티에 값 할당시 반영됨
    • CSS 프로퍼티는 케밥 케이스 사용

클래스 조작

• class 어트리뷰트에 대응하는 DOM프로퍼티는 className, classList 프로퍼티 임
• Element.prototype.className 프로퍼티 : HTML 요소의 class 어트리뷰트 값을 취득하거나 변경
  • setter, getter 모두 존재
• Element.prototype.classList 프로퍼티 : class 어트리뷰트 정보를 담은 DOMTokenList 객체 반환
  • DOMTokenList : 유사 배열 객체이면서 이터러블 임
    • add(...className) : 인수로 전달한 1개 이상의 문자열을 class 어트리뷰트 값으로 추가
    • remove(...className) : 인수로 전달한 1개 이상의 문자열과 일치하는 class 어트리뷰트 값을 제거함 (없으면 무시됨)
    • item(index) : index에 해당하는 클래스를 class 어트리뷰트에서 반환함
    • contains(className) : 인수로 전달한 문자열과 일치하는 클래스가 class 어트리뷰트에 있는지 확인
    • replace(oldClassName, newClassName) : class 어트리뷰의 특정 클래스를 찾아 새로운 클래스 이름으로 변경함
    • toggle(className, 조건식) : class 어트리뷰트에 인수로 전달한 문자열과 일치하는 클래스 존재시 제거, 존재안하면 추가
      • 전달한 조건식의 평가가 true이면 첫번째 인수의 문자열을 추가, false이면 제거
    • forEach, entries, keys, values, supports 등 메서드 제공

• window.getComputedStyle(element, pseudo)
  • stype 프로퍼티의 값 뿐만 아니라, 클래스를 적용한 스타일, 암묵적으로 적용된 스타일을 보기 위해 사용함
    • element에 적용되어 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환(최종적으로 적용된 스타일 확인 가능)
    • pseudo: 가상요소 선택자를 넣어서 해당 가상요소에 대한 스타일을 볼수 있음
      • :after, :before

DOM 표준

• 현재 WHATWG이 단일 표준을 내놓음
• DOM은 현재 4개의 버전이 있음