Frontend/Javascript
문서 객체 모델 (Document Object Model)
olli2
2021. 12. 10. 15:46
문서 객체 모델 (Document Object Model)
- 객체 지향 모델로서 구조화된 문서를 표현하는 형식
- HTML 문서에 접근하기 위한 표준 모델
- 표준은 대부분의 브라우저에서 DOM을 구현하는 기준
- 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공
- 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공
- document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어
DOM 사용 시기
- HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성
- DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임
- 문서 내의 요소(태그) 제어 메소드를 사용하여 요소를 선택할 때 자바스크립트 위치 주의
- 문서 내에서 요소(객체)들이 생성되기 전에 자바스크립트를 선언하게 되면 요소를 선택할 수 없음
문서 내의 요소 (태그) 제어 메소드
| 메소드 | 설명 |
| createElement(‘태그명’) | 요소 노드 생성 |
| createTextNode(“출력할 문자열”) | 텍스트 노드 생성 |
| appendChild(노드) | 객체에 노드 연결 (부착) |
| setAttribute(name, value) | 객체 속성 설정 |
| getAttribute(name) | 객체의 속성 반환 |
| getElementById(id) | 태그의 id 속성이 id와 일치하는 문서 객체 반환 |
| getElementsByName(name) | 태그의 name 속성이 name와 일치하는 문서 객체 반환 |
| getElementsByTagName(태그명) | 태그명과 일치하는 문서 객체를 배열로 반환 |
| removeChild(child) | 문서 객체의 자식 노드 제거 |
| querySelector(선택자) | 1개의 선택자 선택 동일한 요소가 여러 개인 경우 첫 번째 요소만 선택 |
| querySelectorAll(선택자) | 동일한 요소가 여러 개인 경우 모든 요소 선택 |
잘못된 사용 예제 : 문서 내에서 요소(객체)들이 생성되기 전 자바스크립트를 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
var box = document.getElementById('box');
box.innerHTML = "변경";
</script>
</head>
<body>
<div id="box">box</div>
</body>
</html>
올바른 사용 예제 - 1 : 요소 생성 후 자바스크립트 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
</head>
<body>
<div id="box">box</div>
<script type="text/javascript">
var box = document.getElementById('box');
box.innerHTML = "변경";
</script>
</body>
</html>
올바른 사용 예제 - 2 : 윈도우 로드 이벤트 확인 후에 자바스크립트 코드로 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
box.innerHTML = "변경";
};
</script>
</head>
<body>
<div id="box">box</div>
</body>
</html>
예제 : createElement() - 1
<h3> 태그 생성 -> 문자열 (text) 생성 -> text를 h3에 연결 -> h3를 body에 연결 (문서에 출력)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
// 1. 요소 생성
// <h3> 태그 생성하여 객체 참조 변수에 저장
var h3 = document.createElement('h3');
// text 노드 생성
var text = document.createTextNode("출력할 텍스트");
// 2. 문서에 출력
// 텍스트를 변수 h3에 연결
h3.appendChild(text);
// h3을 body에 연결 (부착)
document.body.appendChild(h3);
}
</script>
</head>
<body>
</body>
</html>
예제 : createElement() - 2
<img> 생성 -> 속성 설정 -> 문서에 출력 (body에 연결)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
// 1. 요소 노드 생성
// <img> 태그 생성
var img = document.createElement('img');
// 속성 설정
img.src = "image/bird.jpg";
img.width=250;
img.height=180;
img.titile="예쁜새";
// 2. 문서에 출력
document.body.appendChild(img);
};
</script>
</head>
<body>
</body>
</html>
예제 : getElementById() - 1
id가 ‘header’인 태그를 찾아서 텍스트 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function change() {
// 태그의 id 속성의 값이 'header'인 문서 객체 반환
var header = document.getElementById('header');
// 요소의 텍스트 내용 변경
header.innerHTML = "변경된 제목";
}
</script>
</head>
<body>
<h1 id="header">제목</h1>
<button id="btn" onClick="change()">제목 변경</button>
</body>
</html>
예제 : getElementById() - 2
- [변경] 버튼 누르면 다음과 같이 변경
- 이미지 : B.png
- 텍스트 : 새로운 이미지로 변경되었습니다
- 버튼 텍스트 : 완료
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<style>
div { margin:0 auto; width:60%; text-align:center; }
</style>
<script type="text/javascript">
function change() {
var img = document.getElementById("imageA");
img.src="image/B.png";
var hint = document.getElementById("hint");
hint.innerHTML = "새로운 이미지로 변경되었습니다.";
hint.style.background = "lightgreen";
var btn = document.getElementById("changeButton");
btn.innerHTML = "완료";
}
</script>
</head>
<body>
<div>
<img id="imageA" src="image/A.png">
<div id="hint">[변경] 버튼을 누르면 이미지가 변경됩니다.</div><br><br>
<button id="changeButton" onClick="change()">변경</button>
</div>
</body>
</html>
예제 : querySelector()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
var header = document.querySelector('h1');
header.style.color = "orange";
header.style.background = "gray";
header.innerHTML = "javascript";
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
예제 : querySelectorAll()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
var headers = document.querySelector('h1'); // 배열로 생성됨
for (var i=0; i<headers.length; i++) {
var header = headers[i];
header.style.color = "orange";
header.style.background = "gray";
header.innerHTML = "javascript";
}
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
예제 : getElementsByTagName(태그명)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<style>
div {margin:0 auto; width:600px; text-align:center;}
table {margin:0 auto; width:100%; height:100px;}
td {width:50px; height:30px;}
</style>
<script type="text/javascript">
window.onload = function() {
// 모든 td 요소 다 가져오기
var tdArr = document.getElementsByTagName('td');
var setNumberBtn = document.getElementById('setNumberBtn');
var setColorBtn = document.getElementById('setColorBtn');
var clearNumberBtn = document.getElementById('clearNumberBtn');
var clearColorBtn = document.getElementById('clearColorBtn');
// 셀에 번호 채우기
setNumberBtn.onclick = function() {
for (var i=0; i<tdArr.length; i++) {
tdArr[i].innerHTML = i;
}
};
// 셀에 7가지 색상 채우기
setColorBtn.onclick = function() {
var colors = ["red", "orange", "yellow", "green", "blue", "pink", "gray"];
for (var i=0; i<tdArr.length; i++) {
tdArr[i].style.background = colors[i];
}
};
// 셀의 번호 지우기
clearNumberBtn.onclick = function() {
for (var i=0; i<tdArr.length; i++) {
tdArr[i].innerHTML = "";
}
};
// 셀의 색상 지우기
clearColorBtn.onclick = function() {
for (var i=0; i<tdArr.length; i++) {
tdArr[i].style.background = "none"; //또는 ""
}
};
};
</script>
</head>
<body>
<div>
<table border="1">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<br><br>
<button id="setNumberBtn">셀에 번호 채우기</button>
<button id="setColorBtn">셀에 색상 채우기</button>
<br><br>
<button id="clearNumberBtn">셀에 번호 지우기</button>
<button id="clearColorBtn">셀에 색상 지우기</button>
</div>
</body>
</html>