1.大纲
关于获取元素节点，主要有三种方式。
getElementById（）
getElementsByTagName（）
getElementsByName（）
2.第一种方式程序
在编写 HTML 文档时, 需确保 id 属性值是唯一的.
该方法为 document 对象的方法。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 //first:getElemetById方式
9 var bjNode=document.getElementById("bj");
10 alert(bjNode);
11 }
12 </script>
13 </head>
14 <body>
15 <p>你喜欢哪个城市?</p>
16 <ul id="city">
17 <li id="bj" name="BeiJing">北京</li>
18 <li>上海</li>
19 <li>东京</li>
20 <li>首尔</li>
21 </ul>
22 <br>
23
24 <p>你喜欢的游戏？</p>
25 <ul id="game">
26 <li id="rl" name="hongjing">红警</li>
27 <li>实卡</li>
28 <li>飞车</li>
29 <li>地下城</li>
30 </ul>
31 </body>
32 </html>
3.运行结果
4.第二种方式程序
使用标签名获取指定节点的集合.
该方法为 Node 接口的方法, 即任何一个节点都有这个方法。
主要是和上面的方式进行对比
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 //second:getElemetsByTagName方式
9 //结果：8个节点
10 var liNodes=document.getElementsByTagName("li");
11 alert("li num: "+liNodes.length);
12
13 //细节对比
14 //结果：4个节点
15 var cityNode=document.getElementById("city");
16 var linode=cityNode.getElementsByTagName("li");
17 alert("li num: "+linode.length)
18 }
19 </script>
20 </head>
21 <body>
22 <p>你喜欢哪个城市?</p>
23 <ul id="city">
24 <li id="bj" name="BeiJing">北京</li>
25 <li>上海</li>
26 <li>东京</li>
27 <li>首尔</li>
28 </ul>
29 <br>
30
31 <p>你喜欢的游戏？</p>
32 <ul id="game">
33 <li id="rl" name="hongjing">红警</li>
34 <li>实卡</li>
35 <li>飞车</li>
36 <li>地下城</li>
37 </ul>
38 </body>
39 </html>
5.运行结果
6.第三种方式程序
这么方式是根据name属性的名字来获取元素节点，但是有的元素节点没有name属性，所以不普遍使用。
同时，这种方式在IE浏览器下面不适合。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7 window.onload=function(){
8 //three:getElementsByName方式
9 var genNode=document.getElementsByName("gender");
10 alert("length: "+genNode.length)
11 }
12 </script>
13 </head>
14 <body>
15 性别：
16 <input type="radio" name="gender" value="male">男</input>
17 <input type="radio" name="gender" value="female">女</input>
18 </body>
19 </html>
7.运行效果
时间： 2024-08-26 18:06:46