一
html
<div id="dv">
<p>我是p</p>
<span>我是span</span>
<ul id="list">
<li>01</li>
<li>02</li>
<li id="three">03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
</div>
js 节点 1是标签 2是属性 3是文本
function $(id){
return document.getElementById(id);
}
console.log($("list").parentNode);//得到父节点
console.log($("list").parentElement)//得到父元素
console.log($("list").parentNode.nodeType)//标签的----1(属性)
console.log($("list").parentNode.nodeName)//标签的----大写的名字
console.log($("list").parentNode.nodeValue)//标签的---null(文本内容)
console.log($("list").childNodes);//得到子节点（在ie8中得到的是子元素）
console.log($("list").children);//得到子元素（ie8不支持）
console.log($("list").firstChild);//第一个子节点（在ie8中得到的是子元素）
console.log($("list").firstElementChild);//第一个子元素（ie8不支持）
console.log($("list").lastChild);//最后一个节点（在ie8中得到的是子元素）
console.log($("list").lastElementChild);//最后一个子节点（ie8不支持）
console.log($("list").getAttributeNode("id"))//获取属性节点
console.log($("three").previousSibling);//前一个兄弟节点
console.log($("three").previousElementSibling);//前一个兄弟元素
console.log($("three").nextSibling);//下一个兄弟节点
console.log($("three").nextElementSibling);//下一个兄弟元素
小结：在标准浏览器中获取节点都是对应的节点，获取的元素都是对应的元素。
在ie8中获取的节点都是元素，获取的元素都是undefined，不支持元素代码
二
获得任意元素的第一个子元素和最后一个子元素
//获得任意元素的第一个子元素
function getFirstElemenChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node=element.firstChild;
while(node && node.nodeType != 1){
node=node.nextSibling;
}
return node;
}
}
//获得任意元素的最后一个子节点
function getLastElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node=element.firstChild;
while(node && node.nodeType != 1){
node=node.previousSibling;
}
return node;
}
}
