您的位置：首页 > 其它

DOM中的第一个和最后一个子节点

2016-09-18 22:49 302 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： firstChild lastChild firstElementChild lastElementChild

相关文章推荐

新的分享

章节导航