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>