- firstChild (firstElementChild)
- lastChild (lastElementChild)
- nextSibling (nextElementSibling)
- previousSibling (previousElementSibling)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.1 firstChild,lastChild,nextSibling,previousSibling</title>
<script>
window.onload = function () {
/* body... */
var oUl = document.getElementById('ul1');
/*
firstChild ：第一個(gè)子節(jié)點(diǎn)宙暇，包含文本節(jié)點(diǎn)泣栈。
firstElementChild ：第一個(gè)子元素節(jié)點(diǎn)绿语，標(biāo)準(zhǔn)瀏覽器下支持(下同)
*/
// var oFirst = oUl.firstElementChild||oUl.firstChild;
var oFirst = oUl.children[0];
oFirst.style.background = 'red';
/*
lastChild,lastElementChild ：最后一個(gè)子節(jié)點(diǎn)
*/
var oLast = oUl.lastElementChild||oUl.lastChild;
oLast.style.background = 'orange';
/*
nextSibling,nextElementSibling ：下一個(gè)兄弟節(jié)點(diǎn)
*/
var oNext = oFirst.nextElementSibling||oFirst.nextSibling;
oNext.style.background = 'yellow';
/*
previousSibling,previousElementSibling ：上一個(gè)兄弟節(jié)點(diǎn)
*/
var oPrev = oLast.previousElementSibling||oLast.previousSibling;
oPrev.style.background = 'blue';
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
