firstChild、lastChild 获取第一个、最后一个子节点,谷歌和火狐浏览器获取的是文本节点,而IE8及之前的浏览器会忽略文本节点,获取的是第一个、最后一个子节点
firstElementChild、lastElementChild 获取第一个、最后一个子节点,谷歌和火狐浏览器获取的是第一个、最后一个子节点,但是IE8及之前的浏览器不支持使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var ul = document.getElementById("ul");
// *****************第一个子节点***********************
// 谷歌火狐高版本浏览器获取的是文本节点,而IE8及之前的浏览器会忽略文本节点,获取的是第一个子节点
var lis = ul.firstChild;
console.log(lis.nodeType<span style="color:#ff0000;"><strong><span style="color:#000000;">);</span> //谷歌和火狐浏览器打印结果是 3,IE8及之前的浏览器打印的是 1
</strong></span>// 谷歌和火狐浏览器支持使用,获取的是第一个子标签节点,会忽略文本节点,但是IE8及之前的浏览器会报错
lis = ul.firstElementChild;
console.log(lis.nodeType); <span style="color:#ff0000;"><strong>//谷歌和火狐浏览器打印结果是 1,IE8及之前的浏览器会报错
</strong></span>
// *****************最后一个子节点***********************
// 谷歌火狐高版本浏览器获取的是文本节点,而IE8及之前的浏览器会忽略文本节点,获取的是最后一个子节点
lis = ul.lastChild;
console.log(lis.nodeType); <span style="color:#ff0000;"><strong>//谷歌和火狐浏览器打印结果是 3,IE8及之前的浏览器打印的是 1
</strong></span>// 谷歌和火狐浏览器支持使用,获取的是最后一个子标签节点,会忽略文本节点,但是IE8及之前的浏览器会报错
lis = ul.lastElementChild;
console.log(lis.nodeType); <strong><span style="color:#ff0000;">//谷歌和火狐浏览器打印结果是 1,IE8及之前的浏览器会报错</span></strong>
</script>
</body>
</html>
因存在兼容性的问题,因此封装兼容性的函数来获取第一个和最后一个子节点
<script>
/**
* 封装兼容版本的获取第一个标签节点
* @param element 标签节点对象
*/
function getFirstElement(element) {
//如果当前浏览器支持使用firstElementChild来获取第一个标签节点
if(element.firstElementChild) {
return element.firstElementChild; //将获取的标签节点对象返回
}else {//如果不支持,就得使用firstChild来获取当前标签的第一个子节点
var ele = element.firstChild; //先获取第一个子节点
while(ele && ele.nodeType !== 1) { //第一个ele是确保有这个对象,第二个就是当前的节点类型不是标签节点
ele = ele.nextSibling; //如果不是标签节点,就继续获取下一个节点
}
// 将获取到的第一个子标签节点返回
return ele;
}
}
/**
* 封装兼容版本的获取最后一个标签节点
* @param element 标签节点对象
* @returns {*}
*/
function getLastElement(element) {
//如果当前浏览器支持使用lastElementChild来获取第一个标签节点
if(element.lastElementChild) {
return element.lastElementChild; //将获取的标签节点对象返回
}else {//如果不支持,就得使用lastChild来获取当前标签的第一个子节点
var ele = element.lastChild; //先获取第一个子节点
while(ele && ele.nodeType !== 1) {//第一个ele是确保有这个对象,第二个就是当前的节点类型不是标签节点
ele = ele.previousSibling;//如果不是标签节点,就继续获取下一个节点
}
// 将获取到的第一个子标签节点返回
return ele;
}
}
</script>