HTML DOM을 이용한 HTML 내용 변경

DOM API를 이용하면 다음과 같은 식으로 HTML 엘리먼트의 내용을 변경할 수 있다.

문서 탐색

다음 예제에서는 showTags라는 재귀 함수를 이용해 전체 DOM 트리를 탐색한 다음 모든 엘리먼트의 태그명을 나열한다.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
This is a sample document:
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<script type="text/javascript">
    function showTags(node){
        var children = node.childNodes;
        for (var i=0; i < children.length; i++){
            if (children[i].nodeType == 1 /*Node.ELEMENT_NODE*/){
                console.log(children[i].tagName);
            }
            showTags(children[i]);
        }
    }
    showTags(document);
</script>

</body>
</html>

showTags(document)의 출력 결과는 다음과 같다.

HTML
HEAD
TITLE
BODY
DIV
UL
LI
LI
LI
SCRIPT

Document 객체는 모든 DOM 트리의 루트이지만 해당 트리 내의 HTML 엘리먼트를 나타내지 않는다. document.documentElement 프로퍼티는 문서의 루트 엘리먼트 역할을 하는 태그를 가리킨다.

문서 내의 엘리먼트 찾기

document 객체의 getElementsByTagName() 메서드는 태그 이름을 기준으로 노드 리스트를 반환하고 특정 타입의 HTML 엘리먼트의 리스트를 구하는 데 사용된다. 다음 예제를 보자.

document.getElementsByTagName("body")[0];

var tables = document.getElementsByTagName("table");
console.log("The document contains " + tables + " tables.");

document 객체의 getElementById() 메서드는 id 속성을 기준으로 엘리먼트 노드를 반환하는 데 사용된다. 다음 예제를 보자.

document.getElementById("엘리먼트-id");

document 객체의 getElementsByName() 메서드는 name 속성을 기준으로 노드 리스트를 반환하는 데 사용된다. 다음 예제를 보자.

// Find <a name="mylink">
var link = document.getElementsByName("mylink")[0];

HTML 문서 수정하기

innerHTML 프로퍼티를 이용하면 HTML 엘리먼트의 내용을 동적으로 수정할 수 있다.

HTML 엘리먼트에 대해 이 프로퍼티의 값을 조회하면 해당 엘리먼트의 자식을 나타내는 HTML 텍스트 문자열을 받게 된다.

이 프로퍼티에 값을 설정하면 브라우저에서는 HTML 파서를 호출해 프로퍼티에 지정된 문자열을 파싱해 파서가 반환하는 값으로 엘리먼트의 자식을 대체한다.

innerHTML 프로퍼티를 이용하는 예제는 다음과 같다.

// 엘리먼트 생성
var table = document.getElementById("t1"); 

table.border = 1; // 속성 설정

// 이름|타입|값 헤더를 테이블에 추가
table.innerHTML = "<tr><th>Name</th><th>Type</th><th>Value</th></tr>";

HTML 속성 수정하기

document 엘리먼트의 속성 값을 설정하기 위해 element.setAttribute() 메서드를 사용할 수 있다. 다음 예제를 보자.

document.getElementById("image1").setAttribute("src", "sample.jpg");

속성은 DOM 엘리먼트의 자바스크립트 프로퍼티이기도 하므로 다음과 같이 속성을 설정할 수도 있다.

document.getElementById("image1").src = "sample.jpg";

관련 수업

← 이전홈다음 →