예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2

11장 문서 객체 모델(DOM)

문서 객체 모델(DOM)은 HTML 문서의 구조화된 표현이다. 자바스크립트에서는 DOM 구조에 접근해서 HTML 문서의 구조, 스타일, 내용 등을 변경할 수 있다. 11장에서는 DOM의 구조에 대해 알아보고 DOM의 메서드와 속성에 대해 배우자. 또한 HTML 요소를 선택하고, HTML 요소의 내용과 속성을 변경하고, CSS 속성을 설정하는 방법에 대해서도 알아보자. 마지막으로 DOM 노드에 새로운 노드를 추가하고 삽입, 삭제, 변경하는 방법에 대해 학습하자.

11.1 문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서의 구조화된 표현이다. 자바스크립트에서는 DOM 구조에 접근해서 HTML 문서의 구조, 스타일, 내용 등을 변경할 수 있다. HTML 문서에 대한 DOM에서는 노드(node)와 객체(object)로 HTML 문서를 표현한다. 이 노드와 객체를 이용해서 HTML 문서를 조작할 수 있다.

달리 말하면 DOM은 웹 페이지, 즉 HTML 문서에 접근해서 문서를 읽고 조작할 수 있는 API(Application Programming Interface)를 제공하는 인터페이스라고 할 수 있다.

DOM은 자바스크립트 언어와는 독립적인 구조를 가지고 있으며 파이썬과 같은 언어를 이용해도 DOM을 다룰 수 있다. 그러나 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트가 유일하다.

11.1.1 DOM의 구조

DOM은 HTML 요소(element), 속성(attribute), 내용(content) 등으로 구성된 트리 구조를 가진다. 다음과 같은 HTML 문서의 DOM의 구조에 대해 살펴보자.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>브라우저 제목</title>
</head>
<body>
	<h1>글 제목</h1>
    <p>단락 내용</p>
</body>
</html>

DOM은 웹 페이지 요소들과 요소들에 관련된 정보를 트리 형태로 가지고 있다. DOM에서 모든 HTML 요소들은 객체로 정의된다. 자바스크립트에서는 DOM에서 제공하는 메서드(method)와 프로퍼티(property)을 통하여 HTML 요소들에 접근하거나 요소들을 수정할 수 있다.

11.1.2 DOM 메서드와 프로퍼티

다음은 DOM 메서드와 프로퍼티을 이용하여 웹 페이지에 있는 요소의 내용을 변경하는 예입니다.

예제 11-1. 요소의 내용 변경 예

p_content.html

코드 원문

<p id="p1"></p>
<script>
    document.getElementById("p1").innerHTML = "안녕!";
</script>

예제 11-1. 요소의 내용 변경 예

p_content.html

코드 원문

<p id="p1"></p>
// id가 "p1"인 태그 p를 선언한다.
<script>
    document.getElementById("p1").innerHTML = "안녕!";
    // id가 p1인 곳에 문자열 "안녕!"을 출력한다.
</script>

Document 객체의 getElementById("p1")은 웹 페이지에서 아이디 'p1', 즉 요소를 가져온다. 그리고 innerHTML에 '안녕!'을 설정함으로써 단락 의 내용을 '안녕!'으로 변경한다. 이 때 사용된 Document 객체의 getElementById()를 DOM 메서드(method)라고 하고 innerHTML은 DOM 프로퍼티(property)라고 한다. 이 예는 DOM 메서드와 프로퍼티를 이용하여 단락의 내용을 변경하는 간단한 예이다.

다음은 문서가 로드될 때 글 제목 요소 <h1>을 생성하는 예이다.

예제 11-2. 문서가 로드될 때 글 제목 요소 생성

create_element.html

코드 원문

<script>
    window.onload = function() {
        let element = document.createElement("h1");
        let text = document.createTextNode("글 제목");
        element.appendChild(text);
        document.body.appendChild(element);
    }
</script>

예제 11-2. 문서가 로드될 때 글 제목 요소 생성

create_element.html

코드 원문

<script>
    window.onload = function() {
    // window 객체의 onload() 메서드는 자바스크립트 문서가 로드될 때 자동으로 호출된다.
        let element = document.createElement("h1");
        // document.createElement("h1")은 <h1> 요소를 생성하여 변수 element에 저장한다.
        let text = document.createTextNode("글 제목");
        /* document.createTextNode("글 제목")은 '글 제목'아란 텍스트 노드를 생성해서
        변수 text에 저장한다. */
        element.appendChild(text);
        /* element.appendChild(text)는 element 요소가 가리키는 <h1> 요소에 text,
        즉 '글 제목'을 추가한다. */
        document.body.appendChild(element);
        /* document.body.appendChild(element)는 Document 객체의 <body> 요소에
        element를 추가함으로써 그림 11-3에서와 같이 웹 페이지에 <h1> 요소 '글 제목'
        이 보여진다. */
    }
</script>

11.1.3 Document 객체

DOM의 Document 객체는 웹 페이지에 있는 모든 객체들의 소유주라고 할 수 있다. 웹 페이지에 있는 요소들에 접근하기 위해서는 이 Document 객체로부터 시작해서 해당 요소를 찾아가게 된다.

다음 예제를 통해서 Document 객체를 통해서 HTML 요소에 접근하는 방법에 대해 알아보자.

예제 11-3. 문서가 로드될 때 글 제목 요소 생성

get_name.html

코드 원문

<form name="form1">
    이름 : <input type="text" name="name"><br>
        <button onclick="get_name()">버튼</button>
</form>
<script>
    function get_name(){
        let text = document.form1.name.value;
        alert(text);
    }
</script>

예제 11-3. 문서가 로드될 때 글 제목 요소 생성

get_name.html

코드 원문

<form name="form1">
    이름 : <input type="text" name="name"><br>
        <button onclick="get_name()">버튼</button>
</form>
<script>
    function get_name(){
        let text = document.form1.name.value;
        /* document.form1.name은 Document 객체 안에 있는 form1,
        즉 <form> 요소 안의 name 객체, 즉 <input> 요소를 의미한다.
        그리고 value 속성은 <input> 요소 안에 입력된 텍스트를 의미한다.
        따라서 document.form1.name.value는 웹 페이지에 있는 입력 창에
        사용자가 입력한 텍스트를 의미한다. */
        alert(text);
    }
</script>

이와 같은 방식으로 Document 객체를 이용해서 웹 페이지에 있는 모든 요소들에 접근할 수 있다.

11.2 HTML 요소 선택

자바스크립트에서 웹 페이지에 있는 HTML 요소를 추가, 수정, 삭제를 하기 위해서는 제일 먼저 페이지 내에 존재하는 해당 요소를 선택해야 한다. 페이지에 있는 요소를 선택하는 방법은 크게 다섯 가지로 나누어 볼 수 있다.

1. 아이디(id) 이용

2. 태그 이름(tag name) 이용

3. 클래스 이름(class name) 이용

4. CSS 선택자(selector) 이용

5. 객체 콜렉션(object collection) 이용

11.2.1 아이디로 요소 선택하기

DOM에서 HTML 요소를 선택하는 가장 간단한 방법은 요소의 아이디(id)와 getElementById() 메서드를 이용하는 것이다.

예제 11-4. 아이디로 HTML 요소 선택

get_element_by_id.html

코드 원문

<p id="p1">안녕하세요./p>
<button onclick="changeColor('red')">빨강</button>
<button onclick="changeColor('blue');">파랑</button>
<script>
    function changeColor(new_color) {
        const elem = document.getElementById("p1");
        elem.style.color = new_color;
    }
</script>

예제 11-4. 아이디로 HTML 요소 선택

get_element_by_id.html

코드 원문

<p id="p1">안녕하세요./p>
<button onclick="changeColor('red')">빨강</button>
/* '빨강' 버튼을 클릭하면 changeColor('red') 함수가 호출된다. 이때 'red'가
changeColor()의 매개변수 new_color에 복사된다. */
<button onclick="changeColor('blue');">파랑</button>
/* '파랑" 버튼을 클릭하면 changeColor('blue') 함수가 호출된다. 이때 'blue'가
changeColor()의 매개변수 new_color에 복사된다. */
<script>
    function changeColor(new_color) {
    // changeColor 함수 정의 인수로 new_color를 가진다.
        const elem = document.getElementById("p1");
        /* document 객체의 getElementById('p1')은 아이디 p1,
        즉 <p> 요소를 반환해서 elem에 저장한다. */
        elem.style.color = new_color;
        /* elem.style.color은 <p> 요소의 속성인 style 객체의 color 속성을
        의미한다. 여기에 new_color를 저장함으로써 '안녕하세요.' 글자가
        빨간색 또는 파란색으로 변경된다. */
    }
</script>

11.2.2 태그 이름으로 요소 선택하기

getElementByTagName() 메서드는 HTML 태그 이름으로 요소를 선택할 때 사용된다. 다음 예제를 통하여 getElementByTagName() 메서드의 사용법에 대해 알아보자.

예제 11-5. 태그 이름으로 HTML 요소 선택

get_element_by_tag.html

코드 원문

<div id="parent">
    <p>안녕1</p>
    <p>안녕2</p>
    <p>안녕3</p>
    <p>안녕4</p>
    <p>안녕5</p>
</div>
<p id="show"></p>
<script>
    const x = document.getElementById("parent");
    const y = x.getElementsByTagName("p");

    y[2].style.color = "red";
</script>
</div>

예제 11-5. 태그 이름으로 HTML 요소 선택

get_element_by_tag.html

코드 분석

<div id="parent">
    <p>안녕1</p>
    <p>안녕2</p>
    <p>안녕3</p>
    <p>안녕4</p>
    <p>안녕5</p>
</div>
<p id="show"></p>
<script>
    const x = document.getElementById("parent");
    /* 객체 x가 가리키는 <div> 요소 내에 있는 모든 <p> 요소의 콜렉션
    (collection) 객체를 반환한다. 따라서 콜렉션 y에 저장된 요소들은
    인덱스를 통해 접근할 수 있다. */
    const y = x.getElementsByTagName("p");
	/* y[2]은 세번째 <p> 요소를 의미한다. 콜렉션의 인덱스는 0부터
    시작한다는 점을 유의하기 바란다. '안녕3'의 글자 색상을 빨간색으로
    변경한다. */

    y[2].style.color = "red";
</script>
</div>

11.2.3 클래스 이름으로 요소 선택하기

getElementByClassName() 메서드는 클래스 이름(class name)으로 요소들을 선택할 때 사용된다.

예제 11-6. 클래스 이름으로 HTML 요소 찾기

get_elements_by_class_name.html

코드 원문

<div id="parent">
    <p>안녕1</p>
    <p>안녕2</p>
    <p class="a">안녕3</p>
    <p class="a">안녕4</p>
    <p class="a">안녕5</p>
</div>
<p id="show"></p>
<script>
    const x = document.getElementById("parent");
    const y = x.getElementsByClassName("a");

    for (let i=0; i<y.length; i++) {
        y[i].style.color = "blue";
    }
</script>

11.2.4 CSS 선택자로 요소 선택하기

CSS 선택자는 CSS로 HTML 요소를 꾸미기 위해 해당 요소를 선택하는 데 사용된다. 이 CSS 선택자는 자바스크립트에서 요소를 선택하는 데도 사용될 수 있다. 자바스크립트 querySelector()와 querySelectorAll() 메서드는 CSS 선택자가 가리키는 요소들을 가져오는데 사용된다.

먼저 CSS 선택자에 의해 선택된 요소 중 첫 번째 요소를 반환하는 querySelector() 메서드에 대해 알아보자.

예제 11-7. querySelector() 메서드 사용 예

query_selector.html

코드 원문

<div id="parent">
    <p>안녕1</p>
    <p>안녕2</p>
    <p class="a">안녕3</p>
    <p class="a">안녕4</p>
    <p class="a">안녕5</p>
</div>
<script>
    const x = document.querySelector("p.a");
    x.style.backgroundColor = "red";
</script>

예제 11-7. querySelector() 메서드 사용 예

query_selector.html

코드 원문

<div id="parent">
    <p>안녕1</p>
    <p>안녕2</p>
    <p class="a">안녕3</p>
    <p class="a">안녕4</p>
    <p class="a">안녕5</p>
</div>
<script>
    const x = document.querySelector("p.a");
    /* CSS 선택자 p.a는 <p> 요소의 클래스 a를 의미한다. 여기에 해당하는
    요소가 '안녕3', '안녕4', '안녕5'를 내용으로 하는 단락들이다.
    querySelector() 메서드는 CSS 선택자가 선택한 요소 중 첫 번째
    요소를 반환한다. 따라서 querySelector("p.a")는 선택된 세 개의
    요소 중 첫 번째인 '안녕3'의 요소를 반환한다. */
    x.style.backgroundColor = "red";
    /* x.style.backgroundColor는 요소 x의 style 객체의 배경색을 의미한다.
    여기에 'red'를 설정하기 때문에 11-8에 나타난 것과 같이 '안녕3' 단락의
    배경색이 빨간색으로 변경된다. */
</script>

querySelectorAll() 메서드는 CSS 선택자에 의해 선택된 모든 요소들의 컬렉션(collection)을 반환한다. 다음 예제를 통해 querySelectorAll() 메서드의 사용법에 대해 알아보자.

예제 11-8. queryselectorAll() 메서드 사용 예

query_selector_all.html

코드 원문

<h1 id="title">글 제목</h1>
<p>달락1</p>
<ul>
    <li>항목1</li>
    <li class="item">항목2</li>
    <li class="item">항목3</li>
    <li class="item">항목4</li>
</ul>
<script>
    const x = document.querySelectorAll("h1#title");
    const y = document.querySelectorAll("p");
    const z = document.querySelectorAll("li.item");

    x[0].style.backgroundColor = "red";
    y[0].style.backgroundColor = "green";
    z[0].style.backgroundColor = "blue";
</script>

예제 11-8. queryselectorAll() 메서드 사용 예

query_selector_all.html

코드 원문

<h1 id="title">글 제목</h1>
<p>달락1</p>
<ul>
    <li>항목1</li>
    <li class="item">항목2</li>
    <li class="item">항목3</li>
    <li class="item">항목4</li>
</ul>
<script>
    const x = document.querySelectorAll("h1#title");
    /* CSS 선택자 h1#title은 아이디가 title인 <h1> 요소를 의미한다.
    document.querySelectorAll("h1#title")은 '글 제목'을 내용으로 하는
    <h1>를 선택한다. */
    const y = document.querySelectorAll("p");
    /* document.querySelectorAll("p")는 페이지 내 모든 <p> 요소를 선택한다.
    여기서는 '단락1' 요소를 선택한다. */
    const z = document.querySelectorAll("li.item");
	/* document.querySelectorAll("it.item")은 클래스 이름이 item인 <li> 요소
    ('항목2', '항목3', '항목4'를 선택한다.) */
    
    x[0].style.backgroundColor = "red";
    y[0].style.backgroundColor = "green";
    z[0].style.backgroundColor = "blue";
</script>

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.5~11.6 (0)	2023.10.17
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.3~11.4 (0)	2023.10.17
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4 (0)	2023.10.16
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.2~10.3 (0)	2023.10.15
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.1 (0)	2023.10.15

IT tech development

예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

티스토리툴바

예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

관련글

티스토리툴바