문서 객체 모델(DOM: Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.
DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
alert("Hello !");
};
</script>
<title>index</title>
</head>
<body>
<h1 id='header'>vellalog</h1>
</body>
</html>위 코드는 아래와 같은 트리 모양으로 나타낼 수 있다.
위 그림 속의 각 요소들을 '노드'라고 부른다.
노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분할 수 있다.
요소 노드는 html 태그를 의미하고 텍스트 노드는 요소 노드 안에 들어있는 글자를 의미한다.
1. 문서 객체 만들기
1-1. 동적으로 문서객체 만들기
💭 웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것을 '정적으로 문서 객체를 생성한다'고 표현한다. 페이지의 내용을 특별한 변화 없이 생성하기에 붙은 이름이다. 반면 자바스크립트를 사용해 원래 HTML 페이제는 없던 문서 객체를 생성하는 것을 '동적으로 문서 객체를 생성한다'고 표현한다.
document 객체가 가지는 메서드를 사용해 요소 노드와 텍스트 노드를 생성할 수 있다.
| 메서드 이름 | 설명 |
| createElement(tagName) | 요소 노드를 생성한다. |
| createTextNode(text) | 텍스트 노드를 생성한다. |
<script>
window.onload = function() {
var header = document.createElement('h1');
var text = document.createTextNode('hello');
}
</script>화면에 문서 객체를 출력하려면 생성한 문서 객체를 body 문서 객체에 연결해야한다. 또한 생성한 요소 노드와 텍스트 노드도 연결해야 한다.
이처럼 노드와 노드를 연결할 때는 appendChild(node) 메서드를 사용한다.
<script>
window.onload = function() {
var header = document.createElement('h1');
var text = document.createTextNode('hello');
header.appendChild(text);
document.body.appendChild(header);
};
</script>
1-2. 텍스트 노드를 갖지 않는 노드 생성하기
텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img이다. img 태그는 텍스트 노드 대신 많은 속성을 가지고 있는데, DOM에서는 속성도 하나의 노드이다.
따라서 텍스트 노드를 생성해 요소 노드에 붙이는 것처럼 속성 노드를 생성해 요소 노드에 붙여야한다.
<script>
window.onload = function() {
var img = document.createElement('img');
document.body.appendChild(img);
};
</script>img 태그에 이미지를 넣으려면 src 속성을 지정해야 한다.
<script>
window.onload = function() {
var img = document.createElement('img');
//속성 지정
img.src = 'sly.png';
img.width = 200;
img.height = 200;
document.body.appendChild(img);
};
</script>
개발자 도구를 통해 생성된 것을 확인할 수 있다.
이 방법은 웹 표준이 정의하거나 웹 브라우저가 지원하는 태그의 속성에만 사용할 수 있다.
웹 브라우저가 지원하지 않는 속성은 다음과 같은 메서드를 사용해야한다.
| 문서 객체의 속성 메서드 | |
| 메서드 이름 | 설명 |
| setAttribute(name, value) | 객체의 속성을 지정한다. |
| getAttribute(name) | 객체의 속성을 가져온다. |
<script>
window.onload = function() {
var img = document.createElement('img');
//속성 지정
img.setAttribute('src', 'hello.png');
img.setAttribute('width', 200);
img.setAttribute('height', 200);
document.body.appendChild(img);
};
</script>
1-3. innerHTML 속성 사용하기
innerHTML 속성은 아래 그림과 같이 태그의 내부를 의미하는 속성이다.
<script>
window.onload = function () {
var output = '';
//HTML 태그에 문자열을 직접 입력
output += '<h1>Hello</h1>';
output += '<h1>this is</h1>';
output += '<h1>vellalog</h1>';
//innerHTML 속성에 문자열을 할당
document.body.innerHTML = output;
};
</script>문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체가 생성된다.
2. 문서 객체 가져오기
document 객체가 가지는 getElementById(id) 메서드를 사용하면 이미 웹 페이지이 존재하는 문서 객체를 가져올 수 있다.
getElementById(id)는 태그의 id 속성이 id와 일치하는 문서 객체를 가져온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function () {
//id가 'header1', 'header2'인 객체를 가져옴
var header1 = document.getElementById('header1');
var header2 = document.getElementById('header2');
//문서 객체의 속성 변경
header1.innerHTML = 'Hi!';
header2.innerHTML = 'this is vellalog!';
};
</script>
</head>
<body>
<h1 id="header1">Hello</h1>
<h1 id="header2">vellalog</h1>
</body>
</html>
같은 방법으로 getElementByName(name) 메서드로 태그의 name 속성과 name이 일치하는 문서 객체를 가져올 수 있다.
getElementById()와 getElementByName() 메서드는 한 번에 한 가지 문서 객체만 가져울 수 있지만 아래 메서드를 사용하면 한 번에 여러개의 문서 객체를 가져올 수 있다.
| 메서드 이름 | 설명 |
| getElementsByName(name) | 태그의 name 속성과 name이 일치하는 문서 객체를 배열로 가져올 수 있다. |
| getElementsByTagName(tagName) | tagName 과 일치하느 문서 객체를 배열로 가져온다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var headers = document.getElementsByTagName('h1');
//배열의 인덱스로 객체에 접근
headers[0].innerHTML = 'Hi!';
headers[1].innerHTML = 'this is vella!';
};
</script>
</head>
<body>
<h1>Hello</h1>
<h1>vellalog</h1>
</body>
</html>
배열은 for 반복문을 사용하여 배열 안에 들어 있는 모든 문서 객체의 내용을 변경할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var headers = document.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
headers[i].innerHTML = '반복문을 사용할 수 있는 배열';
}
};
</script>
</head>
<body>
<h1>Hello</h1>
<h1>vellalog</h1>
</body>
</html>
3. 문서 객체 제거 - removeChild()
문서 객체를 제거할 때는 removeChild(child) 메서드를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
//제거할 객체 변수에 담기
var remove = document.getElementById('remove');
document.body.removeChild(remove); //제거
};
</script>
</head>
<body>
<h1>Hello</h1>
<h1 id="remove">this is</h1>
<h1>vellalog</h1>
</body>
</html>
'Dev > JavaScript' 카테고리의 다른 글
| 자바스크립트 프로토타입? (0) | 2023.04.10 |
|---|---|
| JavaScript 자바스크립트 시계 만들기 (1) | 2023.04.09 |
| 카카오맵 api 좌표와 마커 이동(수정)하기 (0) | 2023.03.22 |
| 다음 우편번호 api와 카카오 맵 api 사용기 (0) | 2023.03.07 |
| 자바스크립트 기초 5 - 이벤트 처리 (0) | 2022.12.06 |
댓글