首页 > 代码库 > 获取元素节点

获取元素节点

2024-10-24 13:22:02   220人阅读

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.运行效果

　　技术分享

 

　　

 

获取元素节点


联系
我们