DOM 이해 | Notion

DOM(Document Object Model) 은 HTML, XML 구조화된 문서를 객체 지향적으로 표현한 프로그래밍 interface 이다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단으로 W3C 에서 표준화한 여러 개의 API의 기반이 된다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

DOM Programming Interface

모든 HTML elements는 객체로 정의하며 인터페이스는 객체에 대한 프로퍼티와 메서드로 구성된다. Property 는 element value 이고 Method 는 element 조작을 하는 행위이다.

두 가지 예를 보면 아래와 같다.

getElementById() 메서드는 ID를 이용해 element 탐색을 한다.
innerHTML 프로퍼티는 element 의 content 조작을 한다.

최근의 유행하는 React, Angular, Vue 는 DOM API 기반으로 문서 조작을 위한 편리한 기능을 제공하는 프레임워크이다.

선택자

querySelector() 메서드 이용시 파라미터로 CSS 선택자를 넣어줘야 한다. 선택자의 구분은 아래와 같이 구분한다. querySelector()는 HTMLCollection 아닌 첫 번째 element 를 반환한다.

querySelector("li") : li 태그 탐색
querySelector(".className") : className 클래스 탐색
querySelector("#it") : idName id 탐색

polyfill

사용자가 이용하는 브라우저 버전은 모두 다르며, 각 브라우저 마다 다른 기능을 가지고 있어 파편화가 발생한다. polyfill은 구형 브라우저에서 지원하지 않는 기능(ex, HTML5 API)을 지원하여 최신 브라우저와 같은 동작을 하게끔 하위 호환성을 맞춰준다.

실습

<body>
  <h1>selector test</h1>
  <section>
    <h2> red section </h2>
    <ul>
      <li class="red">apple</li>
      <li class="red">orange</li>
      <li>banana</li>
      <li>grape</li>
      <li>strawberry</li>
    </ul>
  </section>
  <Br>
  <section>
    <h2> blue section </h2>
    <ul>
      <li class="green blue">apple</li>
      <li class="red">orange</li>
      <li>banana</li>
      <li>grape</li>
      <li>strawberry</li>
    </ul>
  </section>
</body>

새로운 과일 추가


var sb = document.querySelector("ul");
var potato = document.createElement("li");
potato.innerText = 'potato';
sb.appendChild(potato);

insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가

var banana = document.querySelector('li:nth-child(3)');
var potato = document.createElement('li');
potato.innerText = 'potato';
document.querySelector('ul').insertBefore(potato, banana);