* 문서 객체 모델(DOM : Document Object Model)
- 웹 브라우저가 HTML 페이지를 인식하는 방식(document 객체와 관련된 객체의 집합)
1. 문서 객체 모델과 관련된 용어 정리
- 태그(Tag) : HTML 페이지에 존재하는 태그
- 문서 객체(DOM) : 태그를 자바스크립트에서 이용할 수 있는 객체
- 노드(Node) : HTML 페이지의 각 요소(html, head, body . . . 등)
- 요소 노드(Element Node) : HTML 태그
- 텍스트 노드(Text Node) : 요소 노드 안에 있는 글자
- 정적 문서 객체 생성 : HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것
- 동적 문서 객체 생성 : JavaScript로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것
2. 텍스트 노드를 갖는 문서 객체 생성
<!-- document.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<script type="text/javascript">
window.onload = function() {
// createElement(tagName) : 요소 노드 생성
// createTextNode(text) : 텍스트 노드 생성
var header = document.createElement('h1');
var textNode = document.createTextNode('Hello DOM');
// appendChild(node) : 객체에 노드를 연결
header.appendChild(textNode);
document.body.appendChild(header);
};
</script>
</head>
<body>
</body>
</html>
3. 텍스트 노드를 갖지 않는 문서 객체 생성
<!-- document2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document2</title>
<script type="text/javascript">
window.onload = function() {
// createElement(tagName) : 요소 노드 생성
var img = document.createElement('img');
// setAttribute(name, value) : 객체의 속성을 지정
// getAttribute(name, value) : 객체의 속성을 가져옴
img.setAttribute('src', 'test.png');
img.setAttribute('width', 600);
img.setAttribute('height', 500 );
// appendChild(node) : 객체에 노드를 연결
document.body.appendChild(img);
};
</script>
</head>
<body>
</body>
</html>
4. innerHTML 속성 사용 문서 객체 생성
<!-- document3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document3</title>
<script type="text/javascript">
window.onload = function() {
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// innerHTML 속성에 문자열을 할당
document.body.innerHTML = output;
// innerHTML 속성에 복합 대입 연산자로 문자열을 추가
document.body.innerHTML += '<h1>Document Object Model</h1>';
};
</script>
</head>
<body>
</body>
</html>
5. textContent 속성 사용 문서 객체 생성
- HTML 태그를 그대로 화면에 출력하고 싶을 경우 사용
<!-- document4.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document4</title>
<script type="text/javascript">
window.onload = function() {
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// textContent 속성으로 HTML 태그를 그대로 화면에 출력
document.body.textContent = output;
document.body.textContent += '<h1>Document Object Model</h1>';
};
</script>
</head>
<body>
</body>
</html>
6. 문서 객체 가져오기 - getElementById()
<!-- document5.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document5</title>
<script type="text/javascript">
window.onload = function() {
// getElementById(id) : 태그의 id 속성이 id와 일치하는 문서 객체를 가져옴
var header1 = document.getElementById('header1');
var header2 = document.getElementById('header2');
header1.innerHTML = 'getElementById(header1)';
header2.innerHTML = 'getElementById(header2)';
};
</script>
</head>
<body>
<h1 id="header1">Header</h1>
<h2 id="header2">Header</h2>
</body>
</html>
7. 문서 객체 가져오기 - getElementsByName(), getElementsByTagName()
- 단순 for 반복문을 사용
<!-- document6.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document6</title>
<script type="text/javascript">
window.onload = function() {
// getElementsByName(name) : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옴
// getElementsByTagName(tagName) : tagName과 일치하는 문서 객체를 배열로 가져옴
var headers = document.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
headers[i].innerHTML = 'getElementsByTagName(' + i + ')';
}
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
8. 문서 객체 가져오기 - querySelector(), queraySelectorAll()
- HTML5에서 추가된 메서드 CSS 선택자로 문서 객체를 선택
<!-- document7.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document7</title>
<script type="text/javascript">
window.onload = function() {
// querySelector(선택자) : 선택자로 가장 처음 선택되는 문서 객체를 가져옴
// querySelectorAll(선택자) : 선택자로 선택되는 문서 객체를 배열로 가져옴
var header1 = document.querySelector('#header1');
var header2 = document.querySelector('.header2');
header1.innerHTML = 'querySelector(#header1)';
header2.innerHTML = 'querySelector(.header2)';
};
</script>
</head>
<body>
<h1 id="header1">Header</h1>
<h2 class="header2">Header</h2>
</body>
</html>
9. 문서 객체 스타일 조작
- 문서 객체의 style 속성을 사용하여 스타일 변경 가능
<!-- document8.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document8</title>
<script type="text/javascript">
window.onload = function() {
var header = document.getElementById('header');
header.style.color = '#4B58E3';
header.style.fontFamily = 'Verdana';
};
</script>
</head>
<body>
<h1 id="header">Header CSS</h1>
</body>
</html>
10. 문서 객체 제거
<!-- document9.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document9</title> <script type="text/javascript"> window.onload = function() { var header = document.getElementById('header'); // removeChild(child) : 문 서 객체의 자식 노드를 제거 document.body.removeChild(header); // 일반적으로 문서 객체를 제거할 때는 부모 노드로 이동해서 부모 노드에서 자식 노드를 삭제해야 함 }; </script> </head> <body> <h1 id="header">Header CSS</h1> </body> </html>
'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript) 예외 처리(Exception handling) (3) | 2013.11.25 |
|---|---|
| 자바스크립트(JavaScript) 이벤트(Event) (0) | 2013.11.21 |
| 자바스크립트(JavaScript) 브라우저 객체 모델(Browser Object Model) (0) | 2013.11.19 |
| 자바스크립트(JavaScript) 메서드 체이닝(Method Chaining) (0) | 2013.11.18 |
| 자바스크립트(JavaScript) 생성자 함수(constructor) (4) | 2013.11.18 |