DOM基础——节点操作（二）

firstChild : 第一个子节点   （标准浏览器下会把标签的换行作为空白文本节点）

firstElementChild: 标准下第一个子节点 （ie6/7/8不支持）

lastChild / lastElementChild : 最后一个子节点 （兼容同上）

previousSibling / previousElementSibling : 上一个兄弟节点 （兼容同上）

nextSibling / nextElementSibling : 下一个兄弟节点 （兼容同上）

parentNode : 当前节点的上一级节点。 （父节点，无兼容问题）

实例1：

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

<script>

var oUl = document.getElementByIdx_x_x_x('ul1');

var first = oUl.firstChild;

alert( first.nodeType ); // ie6/7/8 --> 1; 标准--> 3 

var first = oUl.firstElementChild;

alert( first.nodeType ); // ie6/7/8 --> 报错; 标准--> 1 

兼容的写法（一）：

var first = oUl.firstElementChild || oUl.firstChild;

//firstElementChild必须放左边，否则就没有意义了

var last = oUl.lastElementChild || oUl.lastChild;

var prev = last.previousElementSibling || last.previousSibling;

var next = first.nextElementSibling || first.nextSibling;

（二）函数封装：

function getPrev(obj){

if(!obj.previousSibling)return null;

return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev(obj.previousSibling);

}

function getNext(obj){

if(!obj.nextSibling)return null;

return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext(obj.nextSibling);

}

function getFirst(obj){

if(!obj.firstChild)return null;

return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext(obj.firstChild);

}

function getLast(obj){

if(!obj.lastChild)return null;

return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev(obj.lastChild);

}

以上两种兼容写法的区别：

var oLi = first.previousElementSibling || first.previousSibling;

alert( oLi ); // 标准   object   ie6/7/8   null

如果上一个兄弟元素不存在，则不能用此方法。

var oLi = getPrev(first);

alert( oLi ); // 标准   null   ie6/7/8   null