DOM基礎——節點操作（二）
阿新 • • 發佈：2019-02-06
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