JavaScript的DOM编程--07--节点的属性
节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性.
如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 8 //关于节点的属性: nodeType, nodeName, nodeValue 9 //在文档中, 任何一个节点都有这 3 个属性 10 //而 id, name, value 是具体节点的属性. 11 window.onload = function(){ 12 13 //1. 元素节点的这 3 个属性 14 var bjNode = document.getElementById("bj"); 15 alert(bjNode.nodeType); //元素节点: 1 16 alert(bjNode.nodeName); //节点名: li 17 alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null 18 19 //2. 属性节点 20 var nameAttr = document.getElementById("name") 21 .getAttributeNode("name"); 22 alert(nameAttr.nodeType); //属性节点: 2 23 alert(nameAttr.nodeName); //属性节点的节点名: 属性名 24 alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值 25 26 //3. 文本节点: 27 var textNode = bjNode.firstChild; 28 alert(textNode.nodeType); //文本节点: 0 29 alert(textNode.nodeName); //节点名: #text 30 alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身. 31 32 //nodeType、nodeName 是只读的. 33 //而 nodeValue 是可以被改变的。 34 //以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多. 35 } 36 37 </script> 38 39 </head> 40 <body> 41 <p>你喜欢哪个城市?</p> 42 <ul id="city"> 43 <li id="bj" name="BeiJing">北京</li> 44 <li>上海</li> 45 <li>东京</li> 46 <li>首尔</li> 47 </ul> 48 49 <br><br> 50 <p>你喜欢哪款单机游戏?</p> 51 <ul id="game"> 52 <li id="rl">红警</li> 53 <li>实况</li> 54 <li>极品飞车</li> 55 <li>魔兽</li> 56 </ul> 57 58 <br><br> 59 name: <input type="text" name="username" 60 id="name" value="atguigu"/> 61 </body> 62 </html>
