First Step

DOM(Document Object Model, 문서 객체 모델)

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리를 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

문서 객체 모델은 브라우저가 HTML 페이지의 모델을 생성하고 이 페이지가 브라우저 창에 보여지는 동안 자바스크립트를 이용하여 웹 페이지의 내용에 접근하고 수정하기 위한 방법을 명시하고 있다. DOM은 HTML에서 정의하는 것이 아니다. 그리고 자바스크립트의 일부로 구현된 기능도 아니다. 즉, 완전히 별개의 규칙이다. DOM은 모든 주요 브라우저 벤더들이 구현하고 있으며, 크게 두 가지 영역을 담당한다.

1. HTML 페이지에 대한 모델 구성하기

브라우저는 웹 페이지를 로드한 후, 이 페이지에 대한 모델을 메모리에 생성한다. DOM은 브라우자가 DOM tree를 이용하여 모델을 구성하는 방법을 명시한다. DOM이 객체 모델이라고 불리는 이유는 모델(DOM tree)이 객체를 이용하여 구성되기 때문이다. 각각의 객체는 브라우저 창에 로드된 페이지 중 각자의 영역을 표현현다.

1.1 DOM Tree

header&footer

브라우저가 HTML문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체 트리로 구조화되어 있기 때문에 Tree라고 부른다. DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 진입점(Entry point)는 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

1.2 문서노드

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작 위치이다.

1.3 요소노드

요소 노드는 HTML 요소를 표현한다. HTML요소는 중첩에 의해 부자 관계(부모,자식)를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 틀성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.

1.3 어트리뷰트(attributes) 노드

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트는 HTML요소에 전달되는 추가적인 정보이다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

1.4 텍스트 노드

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 끝 위치이다.

2. HTML 페이지에 접근하고 수정하기

DOM은 모델 내의 각 객체에 접근히고 내용을 수정하기 위한 속성과 메서드(함수)를 정의하고 있다. 내용을 수정하면 브라우저에서 시용자가 보게 될 내용이 변경된다. DOM을 API(Application Programing Interface)라고 부르는 사람도 있다. API는 프로그램이 서로 간에 상호작용을 할 수 있도록 돕는다. DOM은 내가 작성한 코드가 브라우저에게 어떤 것을 요청할 수 있는지, 그리고 사용자들이 보게 될 내용을 변경하려면 브라우저에게 어떻게 요청해야 하는지를 정의하고 있다.

접근 및 수정 조작

DOM tree에서 요소를 찾아내는 기능을 하는 함수를 DOM query라고 한다. 어떤 요소를 한 번 이상 조작할 필요가 있다면 요소를 조회한 결과를 저장하기 위한 변수를 사용해야 한다. 변수에 요소를 저장하는 작업은 DOM tree내에 요소의 위치를 변수에 저장하는 것이다. 요소 노드의 속성과 함수는 이 변수를 통해 조작이 가능하다.

// 개별요소를 선택하는 방법
document.getElementById() // 요소의 id 특성값을 이용해 값을 받아온다.
document.querySelector() // css선택자를 이용해 일치하는 값의 첫번째 요소를 받아온다.

// 여러 개의 노드를 선택하기(노드목록)
document.getElementsByClassName() // 지정된 class특성 값을 가지는 요소들을 모두 선택한다.
document.getElementsByTagName() // 지정된 태그 이름을 가지는 요소들을 모두 선택한다.
document.querySelectorAll() // 지정된 css선택자와 일치하는 요소들을 모두 선택한다.

// 요소 노드 사이를 탐색하기
선택된요소.parentNode // // 현재 요소 노드의 부모 노드를 선택
선택된요소.previousSibling// 현재 DOM트리 내의 이전 형제 요소를 선택
선택된요소.nextSibling // 현재 DOM트리 내의 다음 형제 요소를 선택
선택된요소.firstChild //현재 요소의 첫 번째 자식 노드를 선택한다
선택된요소.lastChild // 현재 요소의 마지막 자식 노드를 선택한다

// 텍스트 노드에 접근/수정하기
선택된요소.nodeValue // 텍스트 노드의 내용에 접근하거나 수정 가능

// HTML 내용을 조작하기
선택된요소.innerHTML // 하나의 속성을 통해 모든 자식 요소와 텍스트 콘텐츠 접근이 가능
선택된요소.textContent // 특정 요소의 텍스트 콘텐츠에만 접근

// 특성 값에 접근/수정하기
선택된요소.className // class 이름을 받을 수 있다
선택된요소.id // id를 받을 수 있다.
선택된요소.hasAttribute() // 요소에 특정한 attributes가 존재하는지 확인
선택된요소.getAttribute() // 특정한 attributes값을 가져온다
선택된요소.setAttribute() // 특정한 attributes를 설정
선택된요소.removeAttribute() // 특정한 attributes를 제거

3. 출처

HTML/CSS와 JavaScript의 접목

드디어 지금까지 열심히 배운 JavaScript가 빛을 발할 때 입니다. HTML/CSS와의 접목을 통해 페이지에 여러가지 기능을 넣을 수 있습니다. DOM이라는 것을 통해 JavaScript를 이용해 HTML 및 CSS에 접근할 수 있으며, 원하는 대로 수정할 수 있습니다.

header&footer

DOM(문서 객체 모델)

DOM은 Document Object Model의 약자로, 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 합니다. 이를 위해 DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현합니다. 여기서 말하는 objects는 기존의 JavaScript의 객체와 동일하며, 사용법 또한 같습니다. 쉽게 말해서 HTML element를 JavaScript 코드에서 불러올 때 사용합니다. DOM 접근은 대표적으로 다음과 같은 방식으로 합니다.

var main = document.getElementById('main'); // 'main' 이라는 id를 갖고 있는 HTML element에 접근합니다.
var items = document.getElementsByClassName('item'); // 'item' 이라는 class를 갖고 있는 HTML element들에 접근합니다.
var paragraphs = document.getElementsByTagName('p'); // 'p' 태그인 HTML element들에 접근합니다.
MDN DOM 에서 보다 자세한 정보를 확인할 수 있으며, 중요한 정보가 많으므로 한번쯤은 읽어보는게 좋습니다.

DOM의 활용

1. appendChild 사용해보기

DOM을 이용해 1초에 한번씩 
main
element에 
div
element를 추가해주는 코드를 작성해 봅시다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>appendChild</title>
  </head>
  <body>
    <main id="content" />
    <script>
      setInterval(function() {
        var myDiv = document.createElement('div');
        myDiv.appendChild(document.createTextNode('Hello'));
        document.getElementById('content').appendChild(myDiv);
      }, 1000);
    </script>
  </body>
</html>

2. color 바꾸기

DOM을 이용해 1초에 한번씩 
main
element의 color를 바꾸는 코드를 작성해 봅시다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>change color</title>
  </head>
  <body>
    <main id="content">
      <h1>Hello</h1>
    </main>
    <script>
      function getRandomNumber() {
        return Math.round(Math.random() * 255);
      }
      setInterval(function() {
        var color = 'rgb(' + getRandomNumber() + ',' + getRandomNumber() + ',' + getRandomNumber() + ')';
        document.getElementById('content').style.color = color;
      }, 1000);
    </script>
  </body>
</html>
위의 코드를 통해 알 수 있듯이, DOM의 
style
프로퍼티를 이용해 style에 접근할 수 있습니다.

3. 매번 다른 색의 div element append하기

1, 2번의 코드를 이용해 1초에 한번씩 
main
element에 무작위 색깔을 갖는 
div
element를 추가해 주는 코드를 작성해 봅시다.