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>
![](https://images2015.cnblogs.com/blog/740085/201609/740085-20160912155203195-1415687692.png)