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
7 <script type="text/javascript">
8
9 //关于节点的属性: nodeType, nodeName, nodeValue
10 //在文档中, 任何一个节点都有这 3 个属性
11 //而 id, name, value 是具体节点的属性.
12 window.onload = function(){
13
14 //1. 元素节点的这 3 个属性
15 var bjNode = document.getElementById("bj");
16 alert(bjNode.nodeType); //元素节点: 1
17 alert(bjNode.nodeName); //节点名: li
18 alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null
19
20 //2. 属性节点
21 var nameAttr = document.getElementById("name")
22 .getAttributeNode("name");
23 alert(nameAttr.nodeType); //属性节点: 2
24 alert(nameAttr.nodeName); //属性节点的节点名: 属性名
25 alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值
26
27 //3. 文本节点:
28 var textNode = bjNode.firstChild;
29 alert(textNode.nodeType); //文本节点: 0
30 alert(textNode.nodeName); //节点名: #text
31 alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.
32
33 //nodeType、nodeName 是只读的.
34 //而 nodeValue 是可以被改变的。
35 //以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.
36 }
37
38 </script>
39
40 </head>
41 <body>
42 <p>你喜欢哪个城市?</p>
43 <ul id="city">
44 <li id="bj" name="BeiJing">北京</li>
45 <li>上海</li>
46 <li>东京</li>
47 <li>首尔</li>
48 </ul>
49
50 <br><br>
51 <p>你喜欢哪款单机游戏?</p>
52 <ul id="game">
53 <li id="rl">红警</li>
54 <li>实况</li>
55 <li>极品飞车</li>
56 <li>魔兽</li>
57 </ul>
58
59 <br><br>
60 name: <input type="text" name="username"
61 id="name" value="atguigu"/>
62 </body>
63 </html>
时间： 2024-08-02 08:36:10