子节点和兄弟节点的操作-2

这次要讲的是子节点和兄弟节点的操作:firstChild lastChild NextSiblings previousSiblings

元素.firstChild: 只读属性,看名字基本就能猜个大概了 第一个子节点
标准浏览器下: firstChild会包含元素类型和文本类型的节点
非标准浏览器下: 只包含元素节点

然而我们不可能像childNodes去判断nodeType,而是用另一个属性: firstElementChild

firstElementChild: 只读属性,标准浏览器下获取第一个元素类型的子节点,而在非标准浏览器下是没有的

还是用这个结构

1
2
3
4
5
6
7
8
<body>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>

1
2
var oUl = document.getElementById('ul1');
alert(oUl.firstChild);

那么获取第一个子节点要实现兼容写法,要这么写

1
2
3
4
5
6
var oUl = document.getElementById('ul1');
if(oUl.firstElementChild){
oUl.firstElementChild.style.background = 'red';
}else{
oUl.firstChild.style.background = 'red';
}

其实可以用另一种简便的写法

1
2
3
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';

也可以达到我们要的效果。你以为这就完了?远远没有
这只是在正常情况下,那么问题来了,什么叫不正常情况??
来,看下这段代码

1
2
3
4
<body>
<ul id="ul1">
</ul>
</body>

恩,ul里面没有元素节点,注意哦,只是没有元素节点,并不是没有节点,里面还有文本节点。恰恰是这个文本节点导致的坑

1
2
3
4
5
6
7
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstChild;
if(oFifst){
oFirst.style.background = 'red';
}else{
alert('没有子节点可以设置颜色'); // 在非标准浏览器下回弹出这个,然而在标准浏览器下呢?
}

1
2
3
4
5
6
7
8
9
var oUl = document.getElementById('ul1');
alert(oUl.firstElementChild); // 弹出 null
var oFirst = oUl.firstElementChild || oUl.firstChild;
alert(oFirst); // 弹出 文本节点,文本节点,走的是true,因为里面没有节点,直接就报错了
if(oFifst){
oFirst.style.background = 'red';
}else{
alert('没有子节点可以设置颜色'); // 在非标准浏览器下回弹出这个,然而在标准浏览器下呢?直接报错了,因为走了第一条if语句
}

demo
当然,正式使用的时候,我们可以用上次说过的children

1
2
3
4
5
6
7
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstChild;
if(oFifst.children[0]){
oFirst.style.background = 'red';
}else{
alert('没有子节点可以设置颜色');
}

那么。这样子就正常了
继续开篇说的 另外三个属性哈

元素.lastChild || 元素.lastElementChild; 最后一个子节点

1
2
3
var oUl = document.getElementById('ul1');
var oLast = oUl.lastElementChild || oUl.lastChild;
oFirst.style.background = 'blue';

nextSibling 当前元素的下一个兄弟节点
元素.nextSibling || 元素.nextElementSibling

1
2
3
4
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstChild;
var oNext = oUl.nextElementSibling || oUl.nextSibling;
oNext.style.background = 'yellow';

previousSibling 当前元素的上一个兄弟节点
元素.previousElementSibling || 元素.previousSibling

1
2
3
var oUl = document.getElementById('ul1');
var oLast = oUl.lastElementChild || oUl.lastChild;
var oPrev = oLast.previousElementSibling || oLast.previousSibling

未完待续……
父节点