1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>node对象</title> 6 <script type="text/javascript"> 7 /* 8 Node对象的属性 9 nodeName 节点名称 10 nodeType 节点类型 11 nodeValue 节点值 12 父节点 13 ul是li的父节点 14 parentNode 15 子节点 16 li是ul的子节点 17 childNodes：得到所有的子节点，但是兼容性很差 18 firstChild：获取指定节点的第一个子节点 19 lastChild：获取指定节点的最后一个子节点 20 同辈节点 21 li直接关系是同辈节点 22 nextSibling：返回一个给定节点的下一个兄弟节点 23 previousSibling：返回一个给定节点的上一个兄弟节点 24 */ 25 </script> 26 </head> 27 <body> 28 <span id="spanId">哈哈呵呵</span> 29 <script type="text/javascript"> 30 // 标签节点 31 var span = document.getElementById("spanId"); 32 document.write("<br />nodeType：" + span.nodeType); // 1 33 document.write("<br />nodeName：" + span.nodeName); // SPAN 34 document.write("<br />nodeValue：" + span.nodeValue); // null 35 // 属性节点 36 var spanId = span.getAttributeNode("id"); 37 document.write("<br /><br />nodeType：" + spanId.nodeType); // 2 38 document.write("<br />nodeName：" + spanId.nodeName); // id 39 document.write("<br />nodeValue：" + spanId.nodeValue); // spanId 40 // 文本节点 41 var text = span.firstChild; 42 document.write("<br /><br />nodeType：" + text.nodeType); // 3 43 document.write("<br />nodeName：" + text.nodeName); // #text 44 document.write("<br />nodeValue：" + text.nodeValue); // 哈哈呵呵 45 </script> 46 </body> 47 </html>
