<ul> 第个节点（文本节点） <li>第个节点（元素节点）</li> 第个节点（文本节点） <li>第个节点（元素节点）</li> 第个节点（文本节点） <li>第个节点（元素节点）</li> 第个节点（文本节点） <li>第个节点（元素节点）</li> 第个节点（文本节点） <li>第个节点（元素节点）</li> 第个节点（文本节点） </ul>
因为通过childNodes属性返回的子节点集合，不仅包括元素节点，而且还包括文本节点，浏览会将标签之间的空白默认为文本节点，在空白处输入文字，会在浏览器显示。所以建议使用children属性，该属性只返回元素节点，不包括文本节点，并且不包括注释节点。
<body> <ul> <li> 我是个文本节点 <span>我是span元素。</span> </li> <li></li> <!-- 注释 --> <li></li> <li></li> <li></li> </ul> <script> var oUl=document.getElementById('u'); alert(oUl.children.length); //返回： </script> </body>
上面的代码，ul下5个li元素，返回子节点个数为5。children属性要比childNodes属性好用太多了，只返回元素的子节点，还不包括孙子辈节点。
(2)、首尾子节点
firstElementChild属性返回children数组的第一个节点。
语法：node.firstElementChild 该方法相当于：element.children[0]
lastElementChild属性返回children数组的最后一个节点。
语法：node.lastElementChild 该方法相对于：element.children[element.children.length-1]
<body> <div> 空白节点 <p>JS</p> <div>DOM</div> <h>jQuery</h> </div> <script> var x=document.getElementById('div'); document.write('第一个节点的名称：'+x.firstElementChild.nodeName+'<br>'); //返回：第一个子节点的名称：P document.write('最后一个节点的名称：'+x.lastElementChild.nodeName) //返回：最后一个子节点的名称：H </script> </body>
(3)、父节点
parentNode属性用于获取指定节点的父节点。注意：父节点只能有一个。通过使用两个获取父节点，可获取祖节点。
实例：点击子节点，隐藏父节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> </head> <body> <ul> <li>aaa <a href="javascript:;">点击隐藏</a></li> <li>bbb <a href="javascript:;">点击隐藏</a></li> <li>ccc <a href="javascript:;">点击隐藏</a></li> <li>ddd <a href="javascript:;">点击隐藏</a></li> <li>eee <a href="javascript:;">点击隐藏</a></li> </ul> <script> var oUl=document.getElementById('u'); //查看ul元素的父节点 alert(oUl.parentNode); //返回：[object HTMLBodyElement] //通过标签名获取所有的a元素 var aA=document.getElementsByTagName('a'); for(var i=;i<aA.length;i++){ aA[i].onclick=function (){ //设置当前节点的父节点为隐藏 this.parentNode.style.display='none'; }; } </script> </body> </html>
offsetParent属性可返回一个元素用于定位的父级。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <style> #div{ width:px; height:px; background:green; margin:px; /*position:relative;*/ } #div{ width:px; height:px; background:red; position:absolute; left:px; top:px; } </style> </head> <body> <div> <div></div> </div> <script> var oDiv=document.getElementById('div'); alert(oDiv.offsetParent); //返回：[object HTMLBodyElement] //div的父级是div,如果取消div相对定位的注释。则返回：[object HTMLDivElement] </script> </body> </html>
(3)、兄弟节点
nextElementSibling属性返回同一树层级中某个节点之后紧跟的节点。
语法：element.nextElementSibling
previousElementSibling属性返回同一树层级中某个节点之前紧跟的节点。
语法：element.previousElementSibling
节点类型
说明
值
元素节点
每一个HTML标签都是一个元素节点，如 <div> 、 <p>、<ul>等
1
属性节点
元素节点（HTML标签）的属性，如 id 、class 、name 等。
2
文本节点
元素节点或属性节点中的文本内容。
3
注释节点
表示文档注释，形式为<!-- text content -->。
8
文档节点
表示整个文档（DOM 树的根节点，即 document ）。
9
实例：获取li元素节点的兄弟节点
<body>