모던자바스크립트 10(38장~39장) (브라우저의 렌더링, DOM)

브라우저의 렌더링 과정

파싱 : 파싱(구문 분석(syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다.

렌더링 : 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 토앻 LDOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

 

브라우저의 주소창에 URL을 입력하고 엔터키를 누르면 URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고 이 IP 주소를 갖는 서버에게 요청을 전송

https://poiemaweb.com을 을 입력하고 엔터 키를 누르면 루트 요청(/, 스킴, 호스트)이 poiemaweb.com 서버로 전송된다. 암묵적으로 index.html을 응답한다. 즉 https://poiemaweb.com/index.html 요청

보면 index.html뿐만 아니라 CSS, 자바스크립트, 이미지, 폰트 파일들도 응답된 것을 확인할 수 있다. 이는 브라우저의 렌더링 엔진이 HTML을 파싱하는 도중에 외부 리소스를 로드하는 태그, 즉 CSS 파일을 로드하는 link 태그, 이미지 파일을 로드하는 img 태그, 자바스크립트를 로드하는 script 태그등을 만나면 HTML의 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청하기 때문이다.

 

HTTP/1.1은 기본적으로 커넥션 당 하나의 요청과 응답만 처리한다. HTTP/2는 커넥션당 여러 개의 요청과 응답이 가능

 

CSS

렌더 트리 생성

렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM를 생성한다. 그리고 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다. 렌더 트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.

렌더링 과정은 반복해서 실행될 수 있기 때문에 리렌더링이 빈번하게 발생하지 않도록 주의할 필요가 있다.

 

JS

자바스크립트 코드에서 DOM API를 사용하여 DOM을 조작할 수 있다. 자바스크립트 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 자바스크립트 엔진은 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행하는 역할을 한다. 자바스크립트 엔진은 자바스크립트를 해석하여 AST(Abstract Syntax Tree)(추상적 구문 트리)를 생성한다. 그리고 AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행한다.

토크나이징 : 단순한 문자열인 자바스크립트 소스코드를 어휘분석하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.

파싱 : 토큰들의 집합을 구문 분석하여 AST를 생성한다. AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조다. AST를 사용하면 TypeScript, Babel, Prettier 같은 트랜스파일러를 구현할 수도 있다. 

바이트코드 생성과 시행 : 파싱의 결과물로서 생성된 AST는 인터프리터가 실행할 수 있는 중간 코드인 바이트코드로 변환되고 인터프리터에 의해 실행된다.

 

만약 자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경된다. 이를 리플로우, 리페인트라한다.

리플로우는 레이아웃 계산을 다시 하는 것이고, 리페인트는 재결합된 렌더 트리를 기반으로 다시 페인트를 하는것이다.

 

자바스크립트 파싱에 의해 HTML 파싱이 중단되므로 script 태그 위치가 중요하다.

보통 body 아래 추천

 

자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 script 태그에 async defer 어트리뷰트가 추가되었다. HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.

async 어트리뷰트

자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다.

defer 어트리뷰트

자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후 진행된다.(DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용)

DOM

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

노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 

DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류(노드 타입)가 있다. 이 중에서 중요한 노드 타입은 4가지다.

1. 문서 노드 document

DOM 트리의 최상위에 존재하는 루트 노드. document 객체

DOM 트리의 노드들에 접근하기 위한 진입점 역할

2. 요소 노드 element

HTML 요소를 가리키는 객체

3. 어트리뷰터 노드 attribute

HTML 요소의 어트리뷰트를 가리키는 객체.

요소 노드와 형제(sibiling) 관계. 따라서 어트리뷰트 노드에 접근하려면 먼저 요소 노드에 접근해야 한다.

4. 텍스트 노드 text

HTML 요소의 텍스트를 가리키는 객체.

요소 노드의 자식이며, 자식 노드를 가질 수 없는 리프노드다.

요소 노드 취득

id를 이용한 요소 노드 취득

document.getElementById('banana') 

id가 여러개여도 첫번째 아이디가 선택되고 없으면 null

HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언된다.

 

태그 이름을 이용한 노드 취득

documnet.getElementsByTagName('li')

태그 이름에 해당하는 모든 노드를 취득한다.(유사배열, 이터러블)

element를 통해 호출하면 그 요소의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.

const $fruits = document.getElementById('fruits');
const $lisFromFruits = $fruits.getElementsByTagName('li');

 

class를 이용한 요소 노드 취득

document.getElementsByClassName

태그와 사용법 같다.

 

css 선택자를 이용한 요소 노드 취득

querySelector, querySelectorAll

전자는 찾는 첫번째 요소, 후자는 모든 요소

/* 전체 선택자: 모든 요소를 선택 */
* { ... }
/* 태그 선택자: 모든 p 태그 요소를 모두 선택 */
p { ... }
/* id 선택자: id 값이 'foo'인 요소를 모두 선택 */
#foo { ... }
/* class 선택자: class 값이 'foo'인 요소를 모두 선택 */
.foo { ... }
/* 어트리뷰트 선택자: input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택 */
input[type=text] { ... }
/* 후손 선택자: div 요소의 후손 요소 중 p 요소를 모두 선택 */
div p { ... }
/* 자식 선택자: div 요소의 자식 요소 중 p 요소를 모두 선택 */
div > p { ... }
/* 인접 형제 선택자: p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택 */
p + ul { ... }
/* 일반 형제 선택자: p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택 */
p ~ ul { ... }
/* 가상 클래스 선택자: hover 상태인 a 요소를 모두 선택 */
a:hover { ... }
/* 가상 요소 선택자: p 요소의 콘텐츠의 앞에 위치하는 공간을 선택
   일반적으로 content 프로퍼티와 함께 사용된다. */
p::before { ... }

 

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

matches 를하면 true, false를 리턴

 

HTMLCollection과 NodeList

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.  중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 객체라는 것이다. HTMLCollection은 언제나 live 객체로 동작하고 NodeList는 대부분 non-live 객체로 동작한다.

둘은 예상과 다르게 동작할 때가 있어 실ㄹ수하기 쉽다. 따라서 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다. (forEach, map, filter, reduce 등 사용) 스프레드나 Array.from으로 배열로 변환하자

 

노드 탐색

공백 텍스트 노드

HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자는 텍스트 노드를 생성한다.

 

자식 노드 탐색

Node.prototype.childNodes : 자식 노드 모두 탐색하여 NodeList에 담아 반환(텍스트 노드 포함)

Node.prototype.children : 자식 노드중에서 요소 노드만 모두 탐색하여 NodeList에 담아 반환(텍스트 노드 미포함)

Node.prototype.firstChild : 첫번째 자식 노드(텍스트 노드이거나 요소 노드)

Node.prototype.lastChild : 마지막 자식 노드

Element.prototype.firstElementChild : 첫번째 자식 요소 노드를 반환

Element.prototype.lastElementChild : 마지막 자식 요소 노드를 반환

 

자식 노드 존재 확인

hasChildNodes()

요소 노드 확인 : children.length 또는 childElementCount

    // 노드 탐색의 기점이 되는 #fruits 요소 노드를 취득한다.
    const $fruits = document.getElementById('fruits');

    // hasChildNodes 메서드는 텍스트 노드를 포함하여 자식 노드의 존재를 확인한다.
    console.log($fruits.hasChildNodes()); // true

    // 자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지는 확인한다.
    console.log(!!$fruits.children.length); // 0 -> false
    // 자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지는 확인한다.
    console.log(!!$fruits.childElementCount); // 0 -> false

 

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

firstChild

 

부모 노드 탐색

parentNode

 

형제 노드 탐새

previousSibling : 이전 형제 노드 반환.

nextSibiling : 다음 형제 노드

previousElementSibiling : 이전 형제 노드 반환(요소 노드)

nextElementSibiling : 다음 형제 노드 반환(요소 노드)

 

노드 정보 취득

nodeType :

Node.ELEMENT_NODE: 요소 노드 타입. 1 반환

Node.TEXT_NODE : 텍스트 노드 타입. 3 반환

Node.DOCUMENT_NODE : 문서 노드 타입. 9 반환

nodeName : 노드의 이름을 문자열로 반환

요소 노드 : 대문자 문자열로 태그 이름(UL, LI)

텍스트 노드 : '#text'

문서 노드 : '#document'

 

요소 노드의 텍스트 조작

위는 모두 읽기 전용 접근자 프로퍼티

nodeValue : 참조하면 노드 객체의 값(텍스트 노드의 텍스트)을 반환. 

  1. 텍스트를 변경할 요소 노드를 취득한 다음, 취득한 요소 노드의 텍스트 노드를 탐색한다. 텍스트 노드는 요소 노드의  자식 노드이므로 firstChild 프로퍼티를 사용하여 탐색한다.

  2. 탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경한다.

textContent : 참조하면 요소 노드의 콘텐츠 영역(시작 태그와 종료 태그 사이) 내의 텍스트를 모두 반환. 

HTML 마크업은 무시되고 따라서 할당할 때 내부의 태그가 사라지고 할당값으로 채워진다.

innerText와 비슷한데 innerText를 사용하지 말자

why? 1. innerText 프로퍼티는 CSS에 순종적. (visibility:hidden으로 지정된 요소 노드의 텍스트 반환x)

       2. CSS를 고려해야 하므로 느리다.

 

DOM 조작

innerHTML

요소 노드의 HTML 마크업을 취득하거나 변경한다.

참조하면 HTML 마크업이 포함된 문자열을 그대로 반환한다.

문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영된다.

이때 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크립팅 공격에 취약하므로 위험하다.(DOMPurify 같은 세니티제이션 라이브러리 사용)

 

insertAdjacentHTML

기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.

첫번째 인수 전달 문자열 : beforebegin, afterbegin, beforeend, afterend

<!DOCTYPE html>
<html>
  <body>
    <!-- beforebegin -->
    <div id="foo">
      <!-- afterbegin -->
      text
      <!-- beforeend -->
    </div>
    <!-- afterend -->
  </body>
  <script>
    const $foo = document.getElementById('foo');

    $foo.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');
    $foo.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');
    $foo.insertAdjacentHTML('beforeend', '<p>beforeend</p>');
    $foo.insertAdjacentHTML('afterend', '<p>afterend</p>');
  </script>
</html>

 

노드 생성과 추가

    const $fruits = document.getElementById('fruits');
    // 1. 요소 노드 생성
    const $li = document.createElement('li');
    // 2. 텍스트 노드 생성
    const textNode = document.createTextNode('Banana');
    // 3. 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
    $li.appendChild(textNode);
    // textContent를 사용하는게 더 간편. 단 안되는 경우도 있으니 주의
    // 4. $li 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($li);

 

복수의 노드 생성과 추가

여러 개의 요소 노드를 생성하여 DOM에 추가하면 리플로우, 리페인트 여러번 실행. 비효율

=> 컨테이너 요소를 사용

=> 컨테이너 요소를 사용해서 추가하면 컨테이너 요소가 추가되서 비효율

=> DocumentFragment 노드 사용. 기존 DOM과는 별도로 존재하므로 DocumentFragment 노드에 자식 노드를 추가하여도 기존 DOM에는 변경x, DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits"></ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');
    // DocumentFragment 노드 생성
    const $fragment = document.createDocumentFragment();
    ['Apple', 'Banana', 'Orange'].forEach(text => {
      // 1. 요소 노드 생성
      const $li = document.createElement('li');
      // 2. 텍스트 노드 생성
      const textNode = document.createTextNode(text);
      // 3. 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
      $li.appendChild(textNode);
      // 4. $li 요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
      $fragment.appendChild($li);
    });

    // 5. DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($fragment);
  </script>
</html>

 

노드 삽입

appenChild : 마지막에 삽입

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    // 요소 노드 생성
    const $li = document.createElement('li');
    // 텍스트 노드를 $li 요소 노드의 마지막 자식 노드로 추가
    $li.appendChild(document.createTextNode('Orange'));
    // $li 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
    document.getElementById('fruits').appendChild($li);
  </script>
</html>

insertBefore(newNode, childNode) : 첫번째 인수로 전달받은 노드를 두번째 인수로 전달받은 노드 앞에 삽입

<!DOCTYPE html>
<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');
    // 요소 노드 생성
    const $li = document.createElement('li');
    // 텍스트 노드를 $li 요소 노드의 마지막 자식 노드로 추가
    $li.appendChild(document.createTextNode('Orange'));
    // $li 요소 노드를 #fruits 요소 노드의 마지막 자식 요소 앞에 삽입
    $fruits.insertBefore($li, $fruits.lastElementChild);
    // Apple - Orange - Banana
  </script>
</html>

 

노드 이동

이미 존재하는 노드를 appendChild 또는 insertBefore 메서드를 사용해서 DOM에 다시 추가하면 노드 이동

 

노드 복사

cloneNode([deep:true | false])

 

노드 교체

replaceChild(newChild, oldChild) : 자신을 호출한 노드의 자식 노드를 다른 노드로 교체

    const $fruits = document.getElementById('fruits');

    // 기존 노드와 교체할 요소 노드를 생성
    const $newChild = document.createElement('li');
    $newChild.textContent = 'Banana';

    // #fruits 요소 노드의 첫 번째 자식 요소 노드를 $newChild 요소 노드로 교체
    $fruits.replaceChild($newChild, $fruits.firstElementChild);

 

노드 삭제

removeChild(child)

    const $fruits = document.getElementById('fruits');
    // #fruits 요소 노드의 마지막 요소를 DOM에서 삭제
    $fruits.removeChild($fruits.lastElementChild);

 

어트리뷰트

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

HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 이터리뷰트 이름=어트리뷰트 값 형식으로 정의한다.

<input id="user" type="text" value="ungmo2">

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

 

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

<!DOCTYPE html>
<html>
<body>
  <input id="user" type="text" value="ungmo2">
  <script>
    // 요소 노드의 attribute 프로퍼티는 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다.
    const { attributes } = document.getElementById('user');
    console.log(attributes);
    // NamedNodeMap {0: id, 1: type, 2: value, id: id, type: type, value: value, length: 3}

    // 어트리뷰트 값 취득
    console.log(attributes.id.value); // user
    console.log(attributes.type.value); // text
    console.log(attributes.value.value); // ungmo2
  </script>
</body>
</html>

 

2. HTML 어트리뷰트 조작

getAttribute/setAttribute 메서드를 사용하면 취득하거나 변경할 수 있다.

존재하는지 확인하려면 hasAttribute, removeAttribute

 

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

요소 노드 객체에는 HTML 어트리뷰트에 대응하는 프로퍼티가 존재한다. 이 DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있다. DOM 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다.

    const $input = document.getElementById('user');
    // 요소 노드의 value 프로퍼티 값을 변경
    $input.value = 'foo';

이처럼 HTML 어트리뷰트는 다음과 같이 DOM에서 중복 관리되고 있는 것처럼 보인다.

1. 요소 노드의 attributes 프로퍼티에서 관리하는 어트리뷰트 노드

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

=> 아니야 XXXXXXXXXXXXXXXXXXXXXX

HTML 어트리뷰트의 역할을 HTML 요소의 초기 상태를 지정하는 말이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.

요소 노드는 2개의 상태, 즉 초기 상태와 최신 상태를 관리해야 한다. 요소 노드의 초기 상태는 어티리뷰트 노드가 관리하며, 요소 노드의 최신 상태는 DOM 프로퍼티가 관리한다.

단, id 어트리뷰트와 id 프로퍼티는 항상 동이리한 값을 유지

 

getAttribute 메서드로 취득한 어트리뷰트 값은 언제나 문자열이지만 DOM 프로퍼티로 취득한 최신 상태 값은 문자열이 아닐 수도 있다.

 

data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다.

<!DOCTYPE html>
<html>
<body>
  <ul class="users">
    <li id="1" data-user-id="7621" data-role="admin">Lee</li>
    <li id="2" data-user-id="9524" data-role="subscriber">Kim</li>
  </ul>
  <script>
    const users = [...document.querySelector('.users').children];

    // user-id가 '7621'인 요소 노드를 취득한다.
    const user = users.find(user => user.dataset.userId === '7621');
    // user-id가 '7621'인 요소 노드에서 data-role의 값을 취득한다.
    console.log(user.dataset.role); // "admin"

    // user-id가 '7621'인 요소 노드의 data-role 값을 변경한다.
    user.dataset.role = 'subscriber';
    // dataset 프로퍼티는 DOMStringMap 객체를 반환한다.
    console.log(user.dataset); // DOMStringMap {userId: "7621", role: "subscriber"}
  </script>
</body>
</html>

 

스타일

인라인 스타일 조작

HTMLElement.prototype.style 프로퍼티는 setter, getter 모두 존재하는 접근자 프로퍼티이다. 스타일 변경 추가 가능

css 프로퍼티는 케밥 케이스를 따른다.

CSSStyleDeclaration 객체의 프로퍼티는 카멜 케이스를 따른다.

 

클래스 조작

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

classList 프로퍼티는 class 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환한다.  유사배열 객체

add(...className), remove

item(index) item[0]이면 첫번째 클래스 반환

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

replace(oldClassName, newClassName)

toggle(className[, force]) : class 어트리뷰트에 인수로 전달한 문자열과 일치하는 클래스가 존재하면 제거, 없으면 추가

두번째 인수가 true이면 강제로 추가. false이면 강제로 제거

이 밖에서 DOMTokenList 객체는 forEach, entries, keys, values, supports 메서드를 제공한다.

 

요소에 적응되어 있는 css 스타일 참조

style 프로퍼티는 인라인 스타일만 반환하기 때문에 HTML 요소에 적용되어 있는 모든 CSS 스타일을 참조할려면 getComputedStyle 메서드를 사용한다.

두번째 인수(pseudo)로 :after, :before와 같은 의사 요소를 지정하는 문자열을 전달할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: red;
    }
    .box {
      width: 100px;
      height: 50px;
      background-color: cornsilk;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="box">Box</div>
  <script>
    const $box = document.querySelector('.box');

    // .box 요소에 적용된 모든 CSS 스타일을 담고 있는 CSSStyleDeclaration 객체를 취득
    const computedStyle = window.getComputedStyle($box);
    console.log(computedStyle); // CSSStyleDeclaration

    // 임베딩 스타일
    console.log(computedStyle.width); // 100px
    console.log(computedStyle.height); // 50px
    console.log(computedStyle.backgroundColor); // rgb(255, 248, 220)
    console.log(computedStyle.border); // 1px solid rgb(0, 0, 0)

    // 상속 스타일(body -> .box)
    console.log(computedStyle.color); // rgb(255, 0, 0)

    // 기본 스타일
    console.log(computedStyle.display); // block
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    .box:before {
      content: 'Hello';
    }
  </style>
</head>
<body>
  <div class="box">Box</div>
  <script>
    const $box = document.querySelector('.box');

    // 의사 요소 :before의 스타일을 취득한다.
    const computedStyle = window.getComputedStyle($box, ':before');
    console.log(computedStyle.content); // "Hello"
  </script>
</body>
</html>