자바스크립트 DOM(Document Object Model)

개발자의 길/Javascript

자바스크립트 DOM(Document Object Model)

모쿠 2017. 4. 6. 16:20

<자바스크립트 문서 객체 모델(DOM)>

<25_dom.html>

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
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
 
<h1>DOM(Document Object Model)</h1>
<input type="text" value="asdf"/>
<p id="para1" 
    style="color: white; background-color: pink;">
여기는 <span style="font-weight: bold; color: black;">단락</span>입니다.
</p>
<div id ="output" style="border: 1px solid grey;"></div>    
 
<script>
var output = document.getElementById('output');
var para = document.getElementById('para1');
output.innerHTML += 'tagName: ' + para.tagName + '<br/>';
output.innerHTML += 'parentElement: ' + para.parentElement + '<br/>';
output.innerHTML += 'children: ' + para.children + '<br/>';
output.innerHTML += 'firstElementChild: ' + para.firstElementChild + '<br/>';
output.innerHTML += para.previousElementSibling + '<br/>';
output.innerHTML += para.nextElementSibling + '<br/>';
    
// HTML 요소가 가지고 있는 content: innerHTML로 읽고 씀
output.innerHTML += para.innerHTML + '<br/>';
// HTML 요소의 속성(attribute): element.attribute
output.innerHTML += para.id + '<br/>';
// HTML 요소의 style: element.style.property
output.innerHTML += para.style.color + '<br/>';
 
// 요소 변경하기
para.style.color = 'red';
para.style.backgroundColor = 'white';
 
</script>
 
 
</body>
</html>
Colored by Color Scripter
cs

<출력화면>

저작자표시 비영리