Binary World

자바스크립트 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>
cs



<출력화면>




저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 이벤트(Event) 01  (0) 2017.04.07
자바스크립트 요소(Element) 찾기  (1) 2017.04.06
자바스크립트 날짜표현(Date)  (0) 2017.04.06
자바스크립트 숫자변환  (0) 2017.04.06
자바스크립트 문자열(String)  (0) 2017.04.06
'개발자의 길/Javascript' Related Articles more
Comments