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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<script type="text/javascript">
 
 
    //태그 검색
    //    -> 태그의 식별자 존재
    //        1. 태그명
    //        2. name 속성
    //            - BOM
    //            - BOM의 접근 방식에서 사용되는 식별자
    //            - 서버로 전송될 때 데이터의 이름(*****)
    //        3. id 속성
    //            - CSS, DOM(getElementById)
    //        4. class 속성
    
    //태그 조작
    //1. 속성값 조작
    //    a. BOM
    //        - HTML 태그에서 존재하는 속성의 이름이 거의 대부분 자바스크립트 속성으로 제공된다.(GET/SET)
    //            ex) <a href="#" title="풍선도움말">
    //                document.links[0].title = "풍선도움말";
    
    //    b. DOM
    //        - HTML 태그에서 존재하는 속성의 이름을 DOM 메소드의 인자값(key)으로 사용해서 제공된다. (Hashmap과 유사)
    //        - 태그.setAttribute(key, value); *
    //        - 태그.getAttribute(key); *
    
    
    //2. PCDATA 조작
    //3. 자식 태그 조작
    
    
    
    function test() {
        
        ////1. <a> 태그 찾기
        // a. BOM -> name 식별자로 찾았을 때
        //document.links[0]
        //document.links["link1"].title = "네이버로 이동합니다.";
        
        // b. DOM -> id 식별자 " 
        //document.getElementById("link1").title = "다시 풍선 도움말";
        
        
            //속성값 조작        
        var link1 = document.links["link1"]; //BOM
        var link1 = document.getElementById("link1"); //DOM
        
        //link1 == link2
        //    : 검색 방법이 다르더라도 찾은 객체는 동일한 객체
        //link1.title = "도움말1";
        //link2.title = "도움말2";    //BOM
        
         //link1.setAttribute("title", "도움말3");
        //link2.setAttribute("title", "도움말4"); //DOM
 
        //link1.href = "http://www.google.com";
        //link1.target = "_blank";                //BOM
        
        //link1.setAttribute("href", "http://www.yahoo.com");
        //link1.setAttribute("target", "_blank");    //DOM
 
                
            //PCDATA조작        
        link1.href = "http://www.daum.net";
        link1.target = "_blank";
        link1.innerText = "다음"; //DOM
        
        
        
        ////2. <img /> 태그 찾기
        // a. BOM
        //document.images[0]
        //var img1 = document.iamges["img1"];
        
        //img1.width = 500;
        //img1.height = 500;
        //img1.src = "images/catty02.png";
        
        
        // b. DOM
        var img1 = document.getElementById("img1");
        //img1.setAttribute("src", "images/catty03.png";)
        
        //img1.setAttribute("width", "128"); //setter
        
        
        //초기상태 접근 시에만.,
        //BOM은 HTML 태그에서 명시적으로 선언된 속성 or 암시적으로 선언된 속성 모두 가져오기 가능
        //DOM은 HTML 태그에서 명시적으로 선언된 속성만 가져오기
        //var w = img1.getAttribute("width"); //getter
        //var w = img1.width;                        
        //alert(w);
        
        var w = img1.width;
        img1.width = w + 10;
        
        var w = img1.height;
        img1.height = h - 10;
        
        
        ////3. 텍스트 박스 찾기
        // a. BOM
        //document.forms[0]
        //document.forms["forms1"]
        //document.forms1
        
        //document.form1.elements[0] : 모든 컨트롤이 포함        
        //var txt1 = document.form1.txt1;
        //txt1.value = "클릭했습니다.";
        //alert(txt1.value);
        //숫자만 입력.,
        /* if (isNaN(txt1.value)) {
            alert("숫자가 아닌값을 입력했습니다.");
        } */
        
        // b. DOM
        //document.getElementById("cb1").checked = true;
        
        
        
        
                
        //여기까지 BOM 모델에 속한 태그만 검색
        //    -> 검색 후 소유하고 있는 속성이나 PCDATA를 제어 + CSS 제어
        //------------------------------------------------
        //이후부터 BOM 모델에 속하지 않는 태그를 검색해보자~
        //(a, img, form(자식) 를 제외한 나머지 태그)
        // 찾게 되는 이유 -> 검색 후 PCDATA를 제어 + CSS 제어
        
        
        
        
        ////4. <div> 태그
        // a. BOM
        //    -> 지원안함(못찾음)
        // b. DOM
        var div1 = document.getElementById("div1");
        div1.innerText = "접근했습니다.";
        
        
        ////5. <p>
        var p1 = dovument.getElmentById("p1");
        p1.innetText = "하하하하";
                    
    }
 
    
</script>
 
 
</head>
<body>
 
 
    <!-- ex11.htm -->
    <!-- 태그 검색 -->
 
 
    
    <input type="button" value="테스트" onclick="test();" />
    <hr />
    
    
    <a href="http://www.naver.com" name="link1" id="link1">네이버</a>
    <br /><br />
    
    
    <img src="images/catty01.png" name="img1" id="img1" width="128" />
    <br /><br />
    
    
    <form name="form1" id="form1">
        컨트롤 : <input type="text" name="txt1" id="txt1" />
        <br /><br />
        <input type="checkbox" name="cb1" id="cb1" />
    </form>
    
    
    <br /><br />
    <div id="div1">상자입니다.</div>
    <p id="p1">문단입니다.</p>
 
 
 
</body>
</html>
 
cs


'WEB > JS' 카테고리의 다른 글

마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22
BOM test  (0) 2016.01.22
부모, 자식 찾기  (0) 2016.01.22
BOM / DOM 방식  (0) 2016.01.22

+ Recent posts

티스토리툴바