모던 자바스크립트 : DOM part 2

6. DOM 조작

DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제, 교체하는 것

DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트 발생

a. innerHTML

Element.prototype.innerHTML : 요소 노드의 HTML 마크업 취득하거나 변경

setter, getter 모두 존재하는 접근자 프로퍼티

요소 노드의 innerHTML 프로퍼티 참조 시 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환

innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로 반환

 

요소 노드의 innerHTML 프로퍼티에 문자열 할당 시 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영됨

 

innerHTML 프로퍼티 사용해 HTML 마크업 문자열로 간단히 DOM 조작 가능

 

요소 노드의 innerHTML 프로퍼티에 할당한 HTML 마크업 문자열은 렌더링 엔진에 의해 파싱되어 요소 노드의 자식으로 DOM에 반영

이때 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크립팅 공격(XSS)에 취약해 위험함

HTML 마크업 내에 자바스크립트 악성 코드가 포함되어 있다면 파싱 과정에서 그대로 실행될 가능성이 있기 때문

 

HTML 새니티제이션 

HTML 새니티제이션 : 사용자로부터 입력받은 데이터에 의해 발생할 수 있는 크로스 사이트 스크립팅 공격을 예방하기 위해 잠재적 위험을 제거하는 기능

새니티제이션 함수를 직접 구현할 수도 있겠지만 DOMPurify 라이브러리를 사용하는 것 권장

DOMPurify 잠재적 위험을 내포한 HTML

마크업을 새니티제이션(살균)하여 잠재적 위험 제거

 

innerHTML 프로퍼티의 단점

요소 노드의 innerHTML 프로퍼티에 HTML 마크업 문자열을 할당하는 경우 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하는 것

innerHTML 프로퍼티는 복잡하지 않은 요소를 새롭게 추가할때 유요하지만 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입해야할 때는 사용하지 않는 것이 좋음

b. insertAdjacentHTML 메서드

Element.prototype.insetAdjacentHTML(position, DOMString)메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소 삽입

insetAdjacentHTML 메서드는 두번째 인수로 전달한 HTML 마크업 문자열(DOMString)을 파싱하고 그결과로 생성된 노드를 첫번째 인수로 전달한 위치(position)에 삽입해 DOM에 반영

첫번째 인수로 전달할 수 있는 문자열은 beforebegin, afterbegin, beforeend, afterend

insetAdjacentHTML 메서드는 기존 요소에는 영향을 주지 않고 새롭게 삽입될 요소만을 파싱해 자식 요소로 추가해 기존의 자식 노드를 모두 제거하고 다시 처음부터 새롭게 자식 노드를 생성해 자식 요소로 추가하는 InnerHTML 프로퍼티보다 효율적이고 빠름

innerHTML 프로퍼티처럼 insetAdjacentHTML 메서드는 HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅 공격에 취약

 

 

 

c. 노드 생성과 추가

DOM은 노드를 직접 생성/삽입/삭제/치환하는 메서드 제공

 

요소 노드 생성

Document.prototype.createElement(tagName) 메서드는 요소 노드 생성해 반환

createElement 메서드의 매개변수 tagName에는 태그 이름을 나타내는 문자열을 인수로 전달

createElement 메서드로 생성한 요소 노드는 기존 DOM에 추가되지 않고 홀로 존재하는 상태

createElement 메서드는 요소 노드를 생성할 뿐 DOM에 추가하지 않음 => 생성된 요소 노드를 DOM에 추가하는 처리 필요

createElement 메서드로 생성한 요소 노드는 자식 노드를 가지고 있지 않음 => 텍스트 노드도 업슨 상태

 

텍스트 노드 생성

Document.prototype.createTextNode(text) 메서드는 텍스트 노드를 생성해 반환

createTextNode 메서드의 매개변수 text에는 텍스트 노드의 값으로 사용할 문자열을 인수로 전달

createTextNode 메서드로 생성한 텍스트 노드는 요소 노드의 자식 노드로 추가되지 않고 홀로 존재하는 상태

createTextNode 메서드는 텍스트 노드를 생성할 뿐 요소 노드에 추가하지 않음 => 생성된 텍스트 노드를 요소 노드에 추가하는 처리 필요

 

텍스트 노드를 요소 노드의 자식 노드로 추가

Node.prototype.appendChild(childNode) 메서드는 매개변수 childNode에게 인수로 전달한 노드를 appendChild 메서드를 호출한 노드의 마지막 자식 노드로 추가

appendChild 메서드의 인수로 createTextNode 메서드로 생성한 텍스트 노드를 전달하면 appendChild 메서드를 호출한 노드의 마지막 자식 노드로 텍스트 노드 추가

appendChild 메서드를 통해 요소 노드와 텍스트 노드는 부자관계로 연결됨

만약 요소 노드에 자식 노드가 하나도 없는 경우에는 textContent 프로퍼티를 사용하는 편이 더욱 간편

요소 노드에 자식 노드가 있는 경우 요소 노드의 textContent 프로퍼티에 문자열 할당 시 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가되므로 주의해야함

 

요소 노드를 DOM에 추가

Node.prototype.appendChild 메서드 사용해 텍스트 노드와 부자관계로 연결한 요소 노드를 부모 요소 노드의 마지막 자식 요소로 추가

새롭게 생성한 요소 노드가 DOM에 추가되면서 리플로우 리페인트 실행

 

 

d. 복수의 노드 생성과 추가

DOM을 여러번 변경하는 문제를 회피하기 위해 컨테이너 요소 사용

컨테이너 요소를 미리 생성한 다음 DOM에 추가해야할 3개의 요소 노드를 컨테이너 요소에 자식 노드로 추가하고 컨테이너 요소를 부모 요소의 자식으로 추가하면 DOM은 한번만 변경

 

불필요한 컨테이너 요소가 DOM에 추가되는 부작용을 DocumentFragment 노드를 통해 해결 가능

DocumentFragment 노드는 문서, 요소, 어트리뷰트, 텍스트 노드와 같은 노드 객체의 일종으로 부모 노드가 없어서 기존 DOM과는 별도로 존재

DocumentFragment 노드는 자식 노드들의 부모노드로서 별도의 서브 DOM을 구성해 기존 DOM에 추가하기 위한 용도로 사용

DocumentFragment 노드는 기존 DOM과는 별도로 존재해 DocumentFragment 노드에 자식 노드를 추가해도 기존 DOM에는 어떠한 변경도 발생하지 않음

DocumentFragment 노드를 DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가

 

Document.prototype.createDocumentFragment 메서드는 비어있는 DocumentFragment 노드를 생성해 반환

DocumentFragment 노드를 생성하고 DOM에 추가할 요소 노드 생성해 DocumentFragment 노드에 자식 노드로 추가 후 DocumentFragment 노드를 기존 DOM에 추가

실제 DOM 변경은 한번이라서 리플로우, 리페인트도 한번만 실행

여러개의 요소 노드를 DOM에 추가하는 경우 DocumentFragment 노드를 사용하는 것이 효율적

 

 

e. 노드 삽입

마지막 노드로 추가

Node.prototype.appendChild 메서드는 인수로 전달받은 노드를 자신을 호출한 노드의 마지막 자식 노드로 DOM에 추가

이때 노드를 추가할 위치를 지정할 수 없고 언제나 마지막 자식 노드로 추가

 

지정한 위치에 노드 삽입

Node.prototype.insertBefore(newNode, childNode) 메서드는 첫번째 인수로 전달받은 노드를 두번째 인수로 전달받은 노드 앞에 삽입

두번째 인수로 전달받은 노드는 반드시 insertBefore 메서드를 호출한 노드의 자식노드이어야함

그렇지 않으면 DOMException 에러 발생

두번째 인수로 전달받은 노드가 null이면 첫번째 인수로 전달받은 노드를 insertBefore 메서드를 호출한 노드의 마지막 자식 노드로 추가=> appendChild 메서드처럼 동작

 

f. 노드 이동

DOM에 이미 존재하는 노드를 appendChild 또는 InsertBefore 메서드 사용해 DOM에 다시 추가하면 현재 위치에서 노드 제거하고 새로운 위치에 노드 추가 => 노드 이동

 

g. 노드 복사

Node.prototype.cloneNode([deep : true | false]) 메서드는 노드의 사본을 생성해 반환

매개변수 deep에 true를 인수로 전달하면 노드를 깊은 복사하여 모든 자손노드가 포함된 사본을 생성

false를 인수로 전달하거나 생략하면 노드를 얕은 복사하여 노드 자신만의 사본을 생성

얕은 복사로 생성된 요소 노드는 자손 노드를 복사하지 않아 텍스트 노드도 없음

h. 노드 교체

Node.prototype.replaceChild(newChild, oldChild) 메서드는 자신을 호출한 노드의 자식 노드를 다른 노드로 교체

첫번째 매개변수 newChild에는 교체할 새로운 노드를 인수로 전달

두번째 매개변수 oldChild에는 이미 존재하는 교체될 노드를 인수로 전달

oldChild 매개변수에 인수로 전달한 노드는 replaceChild 메서드를 호출한 노드의 자식 노드이어야 함

replaceChild 메서드는 자신을 호출한 노드의 자식 노드인 oldChild 노드를 newChild 노드로 교체

oldChild 노드는 DOM에서 제거됨

i. 노드 삭제

Node.prototype.removeChild(child) 메서드는 child 매개변수에 인수로 전달한 노드를 DOM에서 삭제

인수로 전달한 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야함

 

7. 어트리뷰트

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

HTML 문서의 구성요소인 HTML 요소는 여러개의 어트리뷰트를 가질 수 있음

HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름="어트리뷰트 값" 형식으로 정의

글로벌 어트리뷰트(id, class, style, title, lang, tabindex, draggable, hidden 등)와 이벤트 핸들러 어트리뷰트(onclick, onchange, onfocus, onblur, oninput, onkeypress, onkeydown, onkeyup, onmouseover, onsubmit, onload 등)는 모든 HTML 요소에서 공통적으로 사용할 수 있지만 특정 HTML 요소에만 한정적으로 사용 가능한 어트리뷰트도 있음

HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결됨

이때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성됨

모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장

따라서 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득 가능

attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티

attributes 프로퍼티는 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체 반환

b. HTML 어트리뷰트 조작

요소 노드의 attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티 => 값 취득만 가능, 변경 불가능

attributes.id.value와 같이 attributes 프로퍼티를 통해야만 HTML 어트리뷰트 값을 취득할 수 있어 불편함

 

Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있어서 편리함

 

HTML 어트리뷰트 값을 참조하려면 Element.prototype.getAttribute(attributeName)메서드를 사용

HTML 어트리뷰트 값을 변경하려면 Element.prototype.setAttribute(attributeName, attributeValue) 메서드 사용

특정 HTML 어트리뷰트가 존재하는지 확인하려면 Element.prototype.hasAttribute(attributeName) 메서드 사용

특정 HTML 어트리뷰트 삭제하려면 Element.prototype.removeAttribute(attributeName) 사용

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

요소 노드 객체에는 HTML 어트리뷰트에 대응하는 프로퍼티(DOM 프로퍼티)가 존재

DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있음 

id, type, value 어트리뷰트에 대응하는 id, type, value 프로퍼티 존재하며 초기값으로 HTML 어트리뷰트 값을 가짐

DOM 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티 => 참조와 변경 가능

 

HTML 어트리뷰트는 DOM에서 중복 관리되고 있는것 처럼 보임

1. 요소 노드의 attributes 프로퍼티에서 관리하는 어트리뷰트 노드
2. HTML 어트리뷰트에 대응하는 요소 노드의 프로퍼티(DOM 프로퍼티)

HTML 어트리뷰트의 역할 : HTML 요소의 초기 상태 지정

HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않음

예시

value 어트리뷰트는 input 요소가 렌더링될 때 입력 필드에 표시할 초기값 지정

input 요소가 렌더링되면 입력 필드에 표시할 초기값 지정

input 요소가 렌더링되면 입력 필드에 초기값으로 지정한 value 어트리뷰트 값이 표시됨

이때 input 요소의 value 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드의 attributes 프로퍼티에 저장

별도로 value 어트리뷰트의 값은 요소 노드의 value 프로퍼티에 할당

따라서 input 요소 노드가 생성되어 첫 렌더링이 끝난 시점까지 어트리뷰트 노드의 어트리뷰트 값과 요소 노드의 value 프로퍼티에 할당된 값은 HTML 어트리뷰트 값과 동일

하지만 렌더링 이후 사용자가 input 요소에 무언가를 입력하기 시작하면 상황이 달라짐

요소 노드는 상태를 가지고 있음

input 요소는 사용자가 입력 필드에 입력한 값을 상태로 가지고 있음

checkbox 요소 노드는 사용자가 입력 필드에 입력한 체크 여부를 상태로 가지고 있음

input 요소의 입력 필드에 사용자가 입력한 값과 초기상태 값도 관리 해야함

초기 상태 값을 관리하지 않으면 웹페이지를 처음 표시하거나 새로고침할 때 초기 상태 표시 불가능

요소 노드는 초기 상태와 최신 상태 관리 필요

요소 노드의 초기상태는 어트리뷰트 노드가 관리하며 요소 노드의 최신 상태는 DOM 프로퍼티 관리

 

어트리뷰트 노드

HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리

어트리뷰트 노드에서 관리하는 어트리뷰트 값은 사용자의 입력에 의해 상태가 변경되어도 HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태를 그대로 유지

어트리뷰트 노드가 관리하는 초기 상태 값을 취득하거나 변경하려면 getAttribute/setAttribute 메서드 사용

getAttribute 메서드로 취득한 값은 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태 값

HTML 요소에 지정한 어트리뷰트 값은 사용자의 입력에 의해 변하지 않아 결과는 언제나 동일

setAttribute 메서드는 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태 값 변경

 

DOM 프로퍼티

사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티가 관리

DOM 프로퍼티는 사용자 입력에 의한 상태 변화에 반응해 언제나 최신 상태 유지

 

DOM 프로퍼티로 취득한 값은 HTML 요소의 최신 상태 값 의미

이 최신 상태 값은 사용자의 입력에 의해 언제든지 동적으로 변경되어 최신상태 유지

근데 getAttribute 메서드로 취득한 초기 상태값은 변하지 않고 유지됨

 

DOM 프로퍼티에 값을 할당하는 것은 HTML 요소의 최신 상태 값을 변경하는 것 의미 => 사용자가 상태 변경하는 행위와 같음

HTML 요소에 지정한 어트리뷰트 값에는 어떠한 영향도 주지 않음

 

HTML 어트리뷰트는 HTML 요소의 초기 상태값 관리하고 DOM 프로퍼티는 사용자의 입력에 의해 변경되는 최신 상태 관리

모든 DOM 프로퍼티가 사용자의 입력에 의해 변경된 최신 상태를 관리하는 것은 아님

id 어트리뷰트와 id 프로퍼티는 사용자 입력과 관계없이 항상 동일한 값 유지

사용자 입력에 의한 상태 변화와 관계있는 DOM 프로퍼티만 최신 상태 값 관리

사용자 입력에 의한 상태 변화와 관계없는 어트리뷰트와 DOM 프로퍼티는 항상 동일한 값으로 연동

 

HTML 어트리뷰트와 DOM 프로퍼티의 대응 관계

대부분의 HTML 어트리뷰트는 HTML 어트리뷰트 이름과 동일한 DOM 프로퍼티와 1대1로 대응

하지만 언제나 1대1 대응 하는 것은 아니며 HTML 어트리뷰트 이름과 DOM 프로퍼티 키가 반드시 일치하는 것도 아님

id 어트리뷰트와 id 프로퍼티는 1대1 대응이며 동일한 값으로 연동

input 요소의 value 어트리뷰트는 value 프로퍼티와 1대1 대응

하지만 value 어트리뷰트는 초기 상태, value 프로퍼티는 최신 상태

class 어트리뷰트는 className, classList 프로퍼티와 대응

for 어트리뷰트는 htmlFor 프로퍼티와 1대1 대응

td 요소는 dolspan 어트리뷰트는 대응하는 프로퍼티가 존재하지 않음

textContent 프로퍼티는 대응하는 어트리뷰트가 존재하지 않음

어트리뷰트 이름은 대소문자를 구별하지 않지만 대응하는 프로퍼티 키는 카멜 케이스

 

 

DOM 프로퍼티 값의 타입

getAttribute 메서드로 취득한 어트리뷰트 값은 언제나 문자열

하지만 DOM 프로퍼티로 취득한 최신 상태 값은 문자열이 아닐 수도 있음

예를 들어, checkbox 요소의 checked 어트리뷰트 값은 문자열이지만 프로퍼티 값은 불리언

 

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

data 어트리뷰트와 dataset 프로퍼티 사용 시 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터 교환 가능

data 어트리뷰트는 data-user-id, data-role과 같이 data- 접두사 다음 임의의 이름 붙여 사용

data 어트리뷰트 값은 HTMLElement.dataset 프로퍼티로 취득 가능

dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체 반환

DOMStringMap 객체는 data 어트리뷰트의 data- 접두사 다음에 붙인 이름을 카멜 케이스로 변환한 프로퍼티 가지고 잇음

이 프로퍼티로 data 어트리뷰트의 값을 취득하거나 변경 가능

data 어트리뷰트의 data- 접두사 다음에 존재하지 않는 이름을 키로 사용해 dataset 프로퍼티에 값 할당 시 HTML 요소에 data 어트리뷰트 추가

이때 dataset 프로퍼티에 추가한 카멜케이스의 프로퍼티 키는 data 어트리뷰트의 data- 접두사 다음에 케밥케이스로 자동 변경되어 추가

 

 

 

 

 

8. 스타일

a. 인라인 스타일 조작

HTMLElement.prototype.style 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경

style 프로퍼티 참조 시 CSSStyleDeclaration 타입의 객체 반환

CSSStyleDeclaration 객체는 다양한 CSS 프로퍼티에 대응하는 프로퍼티 가지고 있고 이 프로퍼티에 값을 할당하면 해당 CSS 프로퍼티가 인라인 스타일로 HTML 요소에 추가되거나 변경

CSS 프로퍼티는 케밥 케이스

CSSStyleDeclaration 객체의 프로퍼티는 카멜 케이스

케밥케이스 CSS 프로퍼티 그대로 사용하려면 대괄호 표기법 사용

단위 지정이 필요한 CSS 프로퍼티 값은 반드시 단위 지정

 

b. 클래스 조작

.으로 시작하는 클래스 선택자를 사용해 CSS class 미리 정의한 다음 HTML 요소의 class 어트리뷰트 값을 변경하여 HTML 요소의 스타일 변경 가능

HTML 요소의 class 어트리뷰트 조작하려면 class 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티 사용

class 어트리뷰트에 대응하는 DOM 프로퍼티는 className과 classList

class는 예약어라서

 

className

Element.prototype.className 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 HTML 요소의 class 어트리뷰트 값 취득하거나 변경

요소 노드의 className 프로퍼티를 참조하면 class 어트리뷰트 값을 문자열로 반환하고 요소 노드의 className 프로퍼티에 문자열 할당하면 class 어트리뷰트 값을 할당한 문자열로 변경

className 프로퍼티는 문자열을 반환하므로 공백으로 구분된 여러 개의 클래스를 반환하는 경우 다루기 불편함

 

classList

Element.prototype.classList 프로퍼티는 class 어트리뷰트의 정보를 담은 DOMTokenList 객체 반환

DOMTokenList 객체는 class 어트리뷰트의 정보를 나타내는 컬렉션 객체로서 유사 배열 객체이면서 이터러블

DOMTokenList 객체는 다음과 같이 유용한 메서드 제공

add(...className)

add 메서드는 인수로 전달한 1개 이상의 문자열을 class 어트리뷰트 값으로 추가

remove(...className)

remove 메서드 : 인수로 전달한 1개 이상의 문자열과 일치하는 클래스를 class 어트리뷰트에서 삭제

인수로 전달한 문자열과 일치하는 클래스가 class 어트리뷰트에 없으면 에러 없이 무시

item(index)

item 메서드 : 인수로 전달한 index에 해당하는 클래스를 class 어트리뷰트에서 반환

contains(className)

contains 메서드 : 인수로 전달한 문자열과 일치하는 클래스가 class 어트리뷰트에 포함되어 있는지 확인

replace(oldClassName, newClassName)

replace 메서드 : class 어트리뷰트에서 첫번째인수로 전달한 문자열을 두번째 인수로 전달한 문자열로 변경

toggle(className[. force])

toggle 메서드 : class 어트리뷰트에 인수로 전달한 문자열과 일치하는 클래스가 존재하면 제거하고 존재하지 않으면 추가

두번째 인수로 불리언 값으로 평가되는 조건식 전달 가능

이때 조건식의 평가 결과가 true 면 class 어트리뷰트에 강제로 첫번째 인수로 전달받은 문자열 제거

이외에도 forEach, entries, keys, values, supports 메서드 제공

 

 

c. 요소에 적용되어 있는 CSS 스타일 참조

style 프로퍼티는 인라인 스타일만 반환

따라서 클래스를 적용한 스타일이나 상속을 통해 암묵적으로 적용된 스타일은 style 프로퍼티로 참조할 수 없음

HTML 요소에 적용되어 있는 모든 CSS 스타일을 참조해야할 경우 getComputedStyle 메서드 사용

window.getComputedStyle(element[, pseudo]) 메서드는 첫번째 인수(element)로 전달한 요소 노드에 적용되어 있는 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환

평가된 스타일 : 요소 노드에 적용되어 있는 모든 스타일, 즉 링크 스타일, 임베딩 스타일, 인라인 스타일, 자바스크립트에서 적용한 스타일, 상속된 스타일, 기본 스타일 등 모든 스타일이 조합되어 최종적으로 적용된 스타일

getComputedStyle 메서드의 두번째 인수(pseudo)로 :after, :before 와 같은 의사 요소를 지정하는 문자열을 전달 가능

의사 요소가 아닌 일반 요소의 경우 두번째 인수 생략

 

9. DOM 표준

HTML과 DOM 표준은 W3C, WHATWG 두 단체가 협력하며 공통된 표준을 만들어왔음

이후 별개의 HTML과 DOM 표준을 만드는것은 별로라고 주류 브라우저 벤더사가 주도하는 WHATWG가 단일 표준을 내놓음

DOM의 4개의 레벨(버전)