문서 객체 모델 (DOM)

728x90

728x170

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!-- 문서 객체 모델 예제1 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>DOM 객체</title>
</head>
<body>
<div>
    <h1>선호하는 음식</h1>
    <div id="food_1">
        <h2 id="title">한식</h2>
        <ol>
            <li id="kimchi">
                <a href="#">김치</a>
            </li>
            <li>불고기</li>
            <li>비빔밥</li>
        </ol>
    </div>
    <div id="food_2">
        <h2>양식</h2>
        <ol id="list">
            <li>돈까스</li>
            <li id="pizza">피자</li>
            <li>파스타</li>
        </ol>
    </div>
</div>
</body>
</html>
 
<!-- 문서 객체 모델 예제1-1 -->
<script type="text/javascript">
    document.getElementsByTagName("h1")[0].style.color="green";
    document.getElementById("title").style.color="red";
 
    var myList=document.getElementById("food_1").getElementsByTagName("li")[1];
    myList.style.backgroundColor="red";
</script>
 
 
<!-- 문서 객체 모델 예제2 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>DOM 객체</title>
</head>
<body>
<div id="wrap">
    <p>내용1</p>
    <p>내용2</p>
    <p>내용3</p>
    <p>내용4</p>
</div>
<script type="text/javascript">
    document.getElementById("wrap").firstChild.style.color="red";
    
    var p=document.getElementsByTagName("p")[1];
    p.nextSibling.style.backgroundColor="yellow";
</script>
</body>
</html>
Colored by Color Scripter

cs

소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Source Code > JavaScript' 카테고리의 다른 글

문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 (0)	2017.05.21
폼 요소 선택자 (0)	2017.05.21
문서 객체에 이벤트 핸들러 적용 (0)	2017.05.21
선택자 호환성 문제 해결 (0)	2017.05.21
브라우저 객체 모델을 사용해 운영체제와 스크린 정보 얻기 (0)	2017.05.21
navigator 객체 (0)	2017.05.21
history 객체 (0)	2017.05.21
location 객체 (0)	2017.05.21