节点的属性

最新推荐文章于 2021-11-22 20:38:38 发布

weixin_33709609

最新推荐文章于 2021-11-22 20:38:38 发布

阅读量279

点赞数

文章标签： javascript ViewUI

1.节点的属性

　　节点的属性主要分为nodeType，nodeValue，nodeName

　　每个节点都有这三个属性。

2.元素的节点属性

 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         var bjNode=document.getElementById("bj");
 9         //nodetype,nodename,nodeValue
10         alert("type: "+bjNode.nodeType+",name: "+bjNode.nodeName+
11                 ",value: "+bjNode.nodeValue);
12     }
13 </script>
14 </head>
15 <body>
16     <p>你喜欢哪个城市?</p>
17     <ul id="city">
18         <li id="bj" name="BeiJing">北京</li>
19         <li>上海</li>
20         <li>东京</li>
21         <li>首尔</li>
22     </ul>
23         
24     <br>
25     
26     <p>你喜欢哪款单机游戏?</p>
27     <ul id="game">
28         <li id="rl">红警</li>
29         <li>实况</li>
30         <li>极品飞车</li>
31         <li>魔兽</li>
32     </ul>
33         
34     <br>
35     name: <input type="text" name="username" id="user" value="CJ"/>
36 </body>
37 </html>

3.结果

4.属性节点的属性

 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         var userNode=document.getElementById("user").getAttributeNode("name");    
 9         //nodetype,nodename,nodeValue
10         alert("type: "+userNode.nodeType+",name: "+userNode.nodeName+
11                 ",value: "+userNode.nodeValue);
12     }
13 </script>
14 </head>
15 <body>
16     <p>你喜欢哪个城市?</p>
17     <ul id="city">
18         <li id="bj" name="BeiJing">北京</li>
19         <li>上海</li>
20         <li>东京</li>
21         <li>首尔</li>
22     </ul>
23         
24     <br>
25     
26     <p>你喜欢哪款单机游戏?</p>
27     <ul id="game">
28         <li id="rl">红警</li>
29         <li>实况</li>
30         <li>极品飞车</li>
31         <li>魔兽</li>
32     </ul>
33         
34     <br>
35     name: <input type="text" name="username" id="user" value="CJ"/>
36 </body>
37 </html>

5.结果

6.文本节点的属性

 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         var bjNode=document.getElementById("bj");
 9         var bjTextNode=bjNode.firstChild;
10         //nodetype,nodename,nodeValue
11         alert("type: "+bjTextNode.nodeType+",name: "+bjTextNode.nodeName+
12                 ",value: "+bjTextNode.nodeValue);
13     }
14 </script>
15 </head>
16 <body>
17     <p>你喜欢哪个城市?</p>
18     <ul id="city">
19         <li id="bj" name="BeiJing">北京</li>
20         <li>上海</li>
21         <li>东京</li>
22         <li>首尔</li>
23     </ul>
24         
25     <br>
26     
27     <p>你喜欢哪款单机游戏?</p>
28     <ul id="game">
29         <li id="rl">红警</li>
30         <li>实况</li>
31         <li>极品飞车</li>
32         <li>魔兽</li>
33     </ul>
34         
35     <br>
36     name: <input type="text" name="username" id="user" value="CJ"/>
37 </body>
38 </html>