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