DOM(문서 객체 모델)
- 웹 브라우저가 HTML 페이지를 인식하는 방식
- document객체 관련된 객체의 집합
* 기본 개념
아래 그림처럼 각 태그들(노드)을 트리형태로 볼 수 있다.
* createElement(태그이름), appendChild(생성한 노드)
: 화면에 문서 객체를 출력하려면 생성한 객체를 body에 연결해야 한다. h2라는 요소(태그)를 생성한 후에 이를 appendChild로 연결한다. 참고로 appendChild는 자식노드로 연결되는 것이고, innerHTML은 같은 기능이지만 HTML태그로 연결된다.
1
2
3
4
5
6
<script>
window.onload = function () {
var h = document.createElement('h2');
document.body.appendChild(h);
};
</script>
cs
* getElementById()
: 이 또한 document의 객체이며, id속성을 갖는 태그만 가져올 수 있다. 한번에 한 가지 문서 객체만 가져올 수 있다. getElementsByName()과 getElementsByTagName() 메소드는 배열형태로 여러 문서 객체를 가져올 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<script>
window.onload = function () {
var a1 = document.getElementById('a-1');
var a2 = document.getElementById('a-2');
a1.innerHTML = 'Love is not a part of the big picture.';
a2.innerHTML = 'why so serious?';
var array = document.getElementsByTagName('div');
var i = 0;
for(var i in array) {
array[i].innerHTML = 'Life is a waltz for new born';
}
};
</script>
</head>
<body>
<h1 id="a-1"> nothing </h1>
<h1 id="a-2"> nothing </h1>
<div> nothing </div>
<div> nothing </div>
<div> nothing </div>
<div> nothing </div>
</body>
</html>
cs
// 화면에 a1과 a2의 내용이 각각 출력된다.
// div태그를 array에 넣고 문구를 innerHTML로 삽입하므로 4줄 출력된다.
// 여기서는 for in 반복문을 사용했으나, 단순 for반복문을 이용하는 게 좋다.
// for in을 사용하면 문서객체 이외의 속성에도 접근하기 때문이다.
1
2
3
4
5
6
|
<script>
window.onload = function () {
var h = document.createElement('h2');
document.body.appendChild(h);
};
</script>
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<head>
<script>
window.onload = function () {
var a1 = document.getElementById('a-1');
var a2 = document.getElementById('a-2');
a1.innerHTML = 'Love is not a part of the big picture.';
a2.innerHTML = 'why so serious?';
var array = document.getElementsByTagName('div');
var i = 0;
for(var i in array) {
array[i].innerHTML = 'Life is a waltz for new born';
}
};
</script>
</head>
<body>
<h1 id="a-1"> nothing </h1>
<h1 id="a-2"> nothing </h1>
<div> nothing </div>
<div> nothing </div>
<div> nothing </div>
<div> nothing </div>
</body>
</html>
| cs |
// 화면에 a1과 a2의 내용이 각각 출력된다.
// div태그를 array에 넣고 문구를 innerHTML로 삽입하므로 4줄 출력된다.
// 여기서는 for in 반복문을 사용했으나, 단순 for반복문을 이용하는 게 좋다.
// div태그를 array에 넣고 문구를 innerHTML로 삽입하므로 4줄 출력된다.
// 여기서는 for in 반복문을 사용했으나, 단순 for반복문을 이용하는 게 좋다.
// for in을 사용하면 문서객체 이외의 속성에도 접근하기 때문이다.
댓글 없음:
댓글 쓰기