DOM操作节点对象集合

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5        <title>Untitled Document</title>
6        <link rel="stylesheet" type="text/css" href="style/css.css" />
7        <script type="text/javascript">
8        
9            /*
10             * 定义一个函数，专门用来为指定元素绑定单击响应函数
11             *     参数：
12             *         idStr 要绑定单击响应函数的对象的id属性值
13             *         fun 事件的回调函数，当单击元素时，该函数将会被触发
14             */
15            function myClick(idStr , fun){
16                var btn = document.getElementById(idStr);
17                btn.onclick = fun;
18            }
19        
20            window.onload = function(){
21  1、查找#bj节点
22                //为id为btn01的按钮绑定一个单击响应函数
23                var btn01 = document.getElementById("btn01"); //获取按钮
24                btn01.onclick = function(){  //为按钮增加onclick事件，onclick事件作用于bj标签
25                    //查找#bj节点
26                    var bj = document.getElementById("bj");//获取id为bj节点对象，可以对其进行操作
27                    //打印bj
28                    //innerHTML 通过这个属性可以获取到元素内部的html代码
29                    alert(bj.innerHTML);
30                };
312、查找所有li节点
32                //为id为btn02的按钮绑定一个单击响应函数
33                var btn02 = document.getElementById("btn02");
34                btn02.onclick = function(){
35                    //查找所有li节点
36                    //getElementsByTagName()可以根据标签名来获取一组元素节点对象
37                    //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
38                    //即使查询到的元素只有一个，也会封装到数组中返回
39                    var lis = document.getElementsByTagName("li"); //li collection
40
41                    //打印lis
42                    //alert(lis.length);
43
44                    //变量lis
45                    for(var i=0 ; i<lis.length ; i++){
46                        alert(lis[i].innerHTML);  //打印标签文本内容
47                    }
48                };
49  3.查找name=gender的所有节点
50                //为id为btn03的按钮绑定一个单击响应函数
51                var btn03 = document.getElementById("btn03");  //nodelist
52                btn03.onclick = function(){
53                    //查找name=gender的所有节点
54                    var inputs = document.getElementsByName("gender");
55
56                    //alert(inputs.length); // 2
57
58                    for(var i=0 ; i<inputs.length ; i++){
59                        /*
60                         * innerHTML用于获取元素内部的HTML文本
61                         *     对于自结束标签input，这个属性没有意义
62                         */
63                        //alert(inputs[i].innerHTML);
64                        /*
65                         * 如果需要读取元素节点属性，
66                         *     直接使用 元素.属性名
67                         *         例子：元素.id 元素.name 元素.value
68                         *         注意：class属性不能采用这种方式，
69                         *             读取class属性时需要使用 元素.className
70                         */
71                        alert(inputs[i].value);
72                        alert(inputs[i].type);
73                        alert(inputs[i].id);
74                        //alert(inputs[i].class); class是保留关键字
75                        alert(inputs[i].className);
76                    }
77                };
78
79 4、查找#city下所有li节点
80                //为id为btn04的按钮绑定一个单击响应函数
81                var btn04 = document.getElementById("btn04");
82                btn04.onclick = function(){
83                    
84                    //获取id为city的元素
85                    var city = document.getElementById("city");
86                    
87                    //查找#city下所有li节点
88                //    var lis = document.getElementsByTagName("li"); 查找文档页面中所有的li
89                    var lis = city.getElementsByTagName("li");
90
91                    for(var i=0 ; i<lis.length ; i++){
92                        alert(lis[i].innerHTML);
93                    }
94                    
95                };
96
97 5、返回#city的所有子节点
98                //为id为btn05的按钮绑定一个单击响应函数
99                var btn05 = document.getElementById("btn05");
100                btn05.onclick = function(){
101                    //获取id为city的节点
102                    var city = document.getElementById("city");
103                    //返回#city的所有子节点
104                    /*
105                     * childNodes属性会获取包括文本节点在内的所有节点
106                     * 根据DOM标签标签间空白也会当成文本节点
107                     * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
108                     *     所以该属性在IE8中会返回4个子元素而其他浏览器是9个（4个+ 5个li元素之间空白）
109                     */
110                    var cns = city.childNodes;
111                    
112                    //alert(cns.length);
113                    
114                    /*for(var i=0 ; i<cns.length ; i++){
115                        alert(cns[i]);
116                    }*/
117                    
118                    /*
119                     * children属性可以获取当前元素的所有子元素li，不包含文本节点
120                     */
121                    var cns2 = city.children; //推荐使用
122                    alert(cns2.length);
123                };
124 6、返回#phone的第一个子节点
125                //为id为btn06的按钮绑定一个单击响应函数
126                var btn06 = document.getElementById("btn06");
127                btn06.onclick = function(){
128                    //获取id为phone的元素
129                    var phone = document.getElementById("phone");
130                    //返回#phone的第一个子节点
131                    //phone.childNodes[0];
132                    //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
133                    var fir = phone.firstChild;
134                    
135                    //firstElementChild获取当前元素的第一个子元素（不会获取空白文本）
136                    /*
137                     * firstElementChild不支持IE8及以下的浏览器，
138                     *     如果需要兼容他们尽量不要使用
139                     */
140                    //fir = phone.firstElementChild;
141                    
142                    alert(fir);
143                };
144
145 7、返回#bj的父节点
146                //为id为btn07的按钮绑定一个单击响应函数
147                //myClick函数在文档开始的位置，为了减少重复代码，
148                myClick("btn07",function(){  //获取btn07按钮对象，为其绑定匿名函数onclick对哪个节点做出响应
149                    
150                    //获取id为bj的节点
151                    var bj = document.getElementById("bj");
152                    
153                    //返回#bj的父节点
154                    var pn = bj.parentNode;
155                    
156                    alert(pn.innerHTML);  //<li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li>
157                    /*
158                     * innerText
159                     *     - 该属性可以获取到元素内部的文本内容
160                     *     - 它和innerHTML类似，不同的是它会自动将html标签去除
161                     */
162                    //alert(pn.innerText);  //北京 上海 东京 首尔
163                    
164                    
165                });
166                
167 8、返回#android的前一个兄弟节点
168                //为id为btn08的按钮绑定一个单击响应函数
169                myClick("btn08",function(){
170                    
171                    //获取id为android的元素
172                    var and = document.getElementById("android");
173                    
174                    //返回#android的前一个兄弟节点（也可能获取到空白的文本）
175                    var ps = and.previousSibling;
176                    
177                    //previousElementSibling获取前一个兄弟元素（不包含空白文本），IE8及以下不支持
178                    //var pe = and.previousElementSibling;
179                    alert(ps);
180                });
181
182 9、读取#username的value属性值
183                //读取#username的value属性值
184                myClick("btn09",function(){
185                    //获取id为username的元素
186                    var um = document.getElementById("username");
187                    //读取um的value属性值
188                    //文本框的value属性值，就是文本框中填写的内容
189                    alert(um.value);
190                });
191                
192 10、设置#username的value属性值
193                //设置#username的value属性值
194                myClick("btn10",function(){
195                    //获取id为username的元素
196                    var um = document.getElementById("username");
197                    
198                    um.value = "今天天气真不错~~~";
199                });
200                
201 11、返回#bj的文本值
202                //返回#bj的文本值
203                myClick("btn11",function(){
204                    
205                    //获取id为bj的元素
206                    var bj = document.getElementById("bj");
207                    //方法1
208                    //alert(bj.innerHTML);
209                    //alert(bj.innerText);
210
211                    //方法2
212                    //获取bj中的文本节点
213                    /*var fc = bj.firstChild;  //文本对象
214                    alert(fc.nodeValue);*/文本内容
215                    
216                    alert(bj.firstChild.nodeValue);
217//                     // 文本节点一般是作为元素节点的子节点存在的。
218//                 • 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本
219//                     节点。
220//                 • 例如：
221//                 – 元素节点.firstChild;
222// – 获取元素节点的第一个子节点，一般为文本节点
223                    
224                });
225                
226            };
227            
228        
229        </script>
230    </head>
231    <body>
232        <div id="total">
233            <div class="inner">
234                <p>
235                    你喜欢哪个城市?
236                </p>
237
238                <ul id="city">
239                    <li id="bj">北京</li>
240                    <li>上海</li>
241                    <li>东京</li>
242                    <li>首尔</li>
243                </ul>
244
245                <br>
246                <br>
247
248                <p>
249                    你喜欢哪款单机游戏?
250                </p>
251
252                <ul id="game">
253                    <li id="rl">红警</li>
254                    <li>实况</li>
255                    <li>极品飞车</li>
256                    <li>魔兽</li>
257                </ul>
258
259                <br />
260                <br />
261
262                <p>
263                    你手机的操作系统是?
264                </p>
265
266                <ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
267            </div>
268
269            <div class="inner">
270                gender:
271                <input class="hello" type="radio" name="gender" value="male"/>
272                Male
273                <input class="hello" type="radio" name="gender" value="female"/>
274                Female
275                <br>
276                <br>
277                name:
278                <input type="text" name="name" id="username" value="abcde"/>
279            </div>
280        </div>
281        <div id="btnList">
282            <div><button id="btn01">查找#bj节点</button></div>
283            <div><button id="btn02">查找所有li节点</button></div>
284            <div><button id="btn03">查找name=gender的所有节点</button></div>
285            <div><button id="btn04">查找#city下所有li节点</button></div>
286            <div><button id="btn05">返回#city的所有子节点</button></div>
287            <div><button id="btn06">返回#phone的第一个子节点</button></div>
288            <div><button id="btn07">返回#bj的父节点</button></div>
289            <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
290            <div><button id="btn09">返回#username的value属性值</button></div>
291            <div><button id="btn10">设置#username的value属性值</button></div>
292            <div><button id="btn11">返回#bj的文本值</button></div>
293        </div>
294    </body>
295</html>
296
297<!DOCTYPE html>
298<html>
299    <head>
300        <meta charset="UTF-8">
301        <title></title>
302        <script type="text/javascript">
303            
304            window.onload = function(){
30512, 三个常用的对象                
306                //获取body标签
307                //var body = document.getElementsByTagName("body")[0];
308                //document.getElementsByTagName("body") 是一个类数组
309                /*
310                 * 在document中有一个属性body，它保存的是body的引用
311                 */
312                var body = document.body;
313                
314                /*
315                 * document.documentElement保存的是html根标签
316                 */
317                var html = document.documentElement;
318                
319                //console.log(html);
320                
321                /*
322                 * document.all代表页面中所有的元素
323                 all是undefined,可能是浏览器的bug
324                 */
325                var all = document.all;
326                
327                //console.log(all.length);
328                
329                /*for(var i=0 ; i<all.length ; i++){
330                    console.log(all[i]);
331                }*/
332                
333                //all = document.getElementsByTagName("*");  //代表页面中所有的元素
334                //console.log(all.length);
335                
33613,CSS选择器查询方法                
337                /*
338                 * 根据元素的class属性值查询一组元素节点对象
339                 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
340                 *     但是该方法不支持IE8及以下的浏览器
341                 */
342                //var box1 = document.getElementsByClassName("box1");
343                //console.log(box1.length);
344                
345                //获取页面中的所有的div
346                //var divs = document.getElementsByTagName("div");
347                
348                //获取class为box1中的所有的div
349                //.box1 div
350                /*
351                 * document.querySelector()
352                 *     - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
353                 *     - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
354                 *     - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
355                 */
356                var div = document.querySelector(".box1 div");
357                
358                var box1 = document.querySelector(".box1")
359                
360                //console.log(div.innerHTML);
361                //console.log(box1.innerHTML);
362                
363                /*
364                 * document.querySelectorAll()
365                 *     - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
366                 *     - 即使符合条件的元素只有一个，它也会返回数组
367                 */
368                box1 = document.querySelectorAll(".box1");
369                box1 = document.querySelectorAll("#box2");
370                console.log(box1);
371                
372            };
373            
374            
375        </script>
376    </head>
377    <body>
378        <div id="box2"></div>    
379        <div class="box1">
380            我是第一个box1     
381            <div>我是box1中的div</div>
382        </div>
383        <div class="box1">
384            <div>我是box1中的div</div>
385        </div>
386        <div class="box1">
387            <div>我是box1中的div</div>
388        </div>
389        <div class="box1">
390            <div>我是box1中的div</div>
391        </div>
392        
393        <div></div>
394    </body>
395</html>