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 window.onload = function(){
10
11 //为id为btn01的按钮绑定一个单击响应函数
12 var btn01 = document.getElementById("btn01");
13 btn01.onclick = function(){
14 //查找#bj节点
15 var bj = document.getElementById("bj");
16 //打印bj
17 //innerHTML 通过这个属性可以获取到元素内部的html代码
18 alert(bj.innerHTML);
19 };
20
21
22 //为id为btn02的按钮绑定一个单击响应函数
23 var btn02 = document.getElementById("btn02");
24 btn02.onclick = function(){
25 //查找所有li节点
26 //getElementsByTagName()可以根据标签名来获取一组元素节点对象
27 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
28 //即使查询到的元素只有一个，也会封装到数组中返回
29 var lis = document.getElementsByTagName("li");
30
31 //打印lis
32 //alert(lis.length);
33
34 //变量lis
35 for(var i=0 ; i<lis.length ; i++){
36 alert(lis[i].innerHTML);
37 }
38 };
39
40
41 //为id为btn03的按钮绑定一个单击响应函数
42 var btn03 = document.getElementById("btn03");
43 btn03.onclick = function(){
44 //查找name=gender的所有节点
45 var inputs = document.getElementsByName("gender");
46
47 //alert(inputs.length);
48
49 for(var i=0 ; i<inputs.length ; i++){
50 /*
51 * innerHTML用于获取元素内部的HTML代码的
52 * 对于自结束标签，这个属性没有意义
53 */
54 //alert(inputs[i].innerHTML);
55 /*
56 * 如果需要读取元素节点属性，
57 * 直接使用 元素.属性名
58 * 例子：元素.id 元素.name 元素.value
59 * 注意：class属性不能采用这种方式，
60 * 读取class属性时需要使用 元素.className
61 */
62 alert(inputs[i].className);
63 }
64 };
65
66
67
68 //查找#city下所有li节点
69 //返回#city的所有子节点
70 //返回#phone的第一个子节点
71 //返回#bj的父节点
72 //返回#android的前一个兄弟节点
73 //读取#username的value属性值
74 //设置#username的value属性值
75 //返回#bj的文本值
76
77 };
78
79
80 </script>
81 </head>
82 <body>
83 <div id="total">
84 <div class="inner">
85 <p>
86 你喜欢哪个城市?
87 </p>
88
89 <ul id="city">
90 <li id="bj">北京</li>
91 <li>上海</li>
92 <li>东京</li>
93 <li>首尔</li>
94 </ul>
95
96 <br>
97 <br>
98
99 <p>
100 你喜欢哪款单机游戏?
101 </p>
102
103 <ul id="game">
104 <li id="rl">红警</li>
105 <li>实况</li>
106 <li>极品飞车</li>
107 <li>魔兽</li>
108 </ul>
109
110 <br />
111 <br />
112
113 <p>
114 你手机的操作系统是?
115 </p>
116
117 <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
118 </div>
119
120 <div class="inner">
121 gender:
122 <input class="hello" type="radio" name="gender" value="male"/>
123 Male
124 <input class="hello" type="radio" name="gender" value="female"/>
125 Female
126 <br>
127 <br>
128 name:
129 <input type="text" name="name" id="username" value="abcde"/>
130 </div>
131 </div>
132 <div id="btnList">
133 <div><button id="btn01">查找#bj节点</button></div>
134 <div><button id="btn02">查找所有li节点</button></div>
135 <div><button id="btn03">查找name=gender的所有节点</button></div>
136 <div><button id="btn04">查找#city下所有li节点</button></div>
137 <div><button id="btn05">返回#city的所有子节点</button></div>
138 <div><button id="btn06">返回#phone的第一个子节点</button></div>
139 <div><button id="btn07">返回#bj的父节点</button></div>
140 <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
141 <div><button id="btn09">返回#username的value属性值</button></div>
142 <div><button id="btn10">设置#username的value属性值</button></div>
143 <div><button id="btn11">返回#bj的文本值</button></div>
144 </div>
145 </body>
146 </html>
DOM查询
Wesley13
• 阅读
793
点赞
收藏
