[JS] DOM

DOM : 문서를 동적으로 다루는 방법

자바스크립트로 문서 객체(DOM)을 조작할 수 있다. 그렇다면 DOM이란 무엇일까?

문서 객체 모델(Document Object Model, DOM)은 HTML 및 XML 문서를 처리하는 API이다. 문서의 구조적 형태를 제공하므로 자바스크립트(JavaScript)와 같은 스크립트 언어를 사용하여 문서 내용과 시각적 표현을 수정할 수 있다.

DOM 메서드

메서드	설명
document.getElementById(id명)	아이디를 사용해 문서 객체(요소) 선택
document.querySelector(CSS 선택자)	CSS 선택자를 사용하는 방식(IE 8 이상)
document.getElementsByTagName(태그명)	태그명으로 여러 문서 객체 선택
document.getElementsByClassName(클래스명)	클래스명으로 여러 문서 객체 선택(IE 9 이상)
document.querySelectorAll(CSS 선택자)	CSS 선택자로 여러 문서 객체 선택(IE 9 이상)

1. getElementById : id명을 사용하는 방식

이 메서드는 요소에 접근하는 가장 빠른 방식으로, 하나의 요소만 선택하는 방식이다.

<h1 id="title">여기를 변경해주세요.</h1>

<script>
    var title = document.getElementById('title');

    title.style.color = 'white';
    title.style.background = 'orange';
    title.innerHTML = "JavaScript로 문서를 조작";
</script>

실행결과

See the Pen xzwwPx by SoyeonJung (@je_ss2) on CodePen.

html 문서 내에서 id명이 title인 문서 객체를 선택하고 JavaScript에서 title변수에 반영한 후 문서 객체 스타일을 변경하는 등 문서를 조작한다.

2. querySelector : CSS 선택자를 사용하는 방식

CSS 선택자를 사용하는 방식은 편리하지만 가장 첫 번쨰 요소만 선택할 수 있다.

<li>first</li>
<ul>
    <li>second</li>
    <li>third</li>
</ul>

<script>
    var li = document.querySelector('ul > li');

    li.style.color = "red";
</script>

실행결과

See the Pen rKOxpM by SoyeonJung (@je_ss2) on CodePen.

3. getElementsByTagName : 태그명으로 여러 문서 객체 선택

태그명으로 문서 객체를 선택하는 방식이다. 태그는 문서 내에서 중복 사용할 수 있으므로 작성한 만큼 배열로 판단한다.

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

<script>
    var li = document.getElementsByTagName('li');

    for(var i=0; i<li.length; i++) {
        li[i].style.color = "red";
    }

    li[1].style.background = "blue";
</script>

실행결과

See the Pen ZRbbmd by SoyeonJung (@je_ss2) on CodePen.

4. getElementsByClassName : 클래스명으로 여러 문서 객체 선택

클래스명으로 문서 객체를 선택하는 방식이다. 클래스는 문서 내에서 중복 사용할 수 있으므로 작성한 만큼 배열로 판단한다.

<div class="select">
    선택된 문서 객체
</div>

<div>
    선택되지 않은 문서 객체
</div>

<div class="select">
    선택된 문서 객체2
</div>

<script>
    var selects = document.getElementsByClassName('select');

    selects[0].style.color = "red";
    selects[1].style.color = "blue";
</script>

실행결과

See the Pen XYmmvb by SoyeonJung (@je_ss2) on CodePen.

5. querySelectorAll : CSS 선택자로 여러 문서 객체 선택

CSS 선택자로 여러 문서 객체를 선택할 수 있다.

<div>
    <span>first in "p"</span>
</div>
<span>second</span>
<div>
    <span>third in "p"</span>
</div>


<script>
    var span = document.querySelectorAll('div > span');

    for(var i=0; i<span.length; i++) {
        span[i].style.color = "red";
    }
</script>

실행결과

See the Pen OEyMga by SoyeonJung (@je_ss2) on CodePen.