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

最新推荐文章于 2023-03-22 11:21:57 发布

安静的对折

最新推荐文章于 2023-03-22 11:21:57 发布

阅读量2.5k

点赞数

分类专栏： JS 文章标签： firstChild lastChild firstElementChild lastElementChild

本文链接：https://blog.csdn.net/k491022087/article/details/52578913

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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>