DOM知识：文档中子节点或子元素获取时的兼容代码

最新推荐文章于 2024-02-04 16:20:58 发布

原创最新推荐文章于 2024-02-04 16:20:58 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

个人心得专栏收录该内容

26 篇文章

订阅专栏

本文介绍了解决浏览器兼容性问题的一种方法，特别是针对获取DOM中第一个子元素的场景。通过判断浏览器是否支持firstElementChild属性，提供了一段兼容代码，确保在IE8及现代浏览器中都能正确获取第一个子元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子节点（node）：包括子级里边所有的标签、空格、文本等。

子元素：当前子级里的所有的标签元素。

通过DOM获取第一个子节点的方法：getFirstChild;------->谷歌火狐支持，正常使用，但是IE8获取的是第一个子元素

通过DOM获取第一个子元素的方法：getFirstElementChild -------->谷歌火狐支持，正常使用但是IE8是undefined

所以我们就可以通过这个不一样来做为问题的切口。

这里通过一个例子来展示一下解决这个兼容问题的兼容代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的兼容代码</title>
</head>
<body>
<!--在console控制台里边打印出第一个子元素的内容-->
<ul id="uu">
    <li>第一个li</li>
    <li>第二个li</li>
    <li>第三个li</li>
    <li>第四个li</li>
    <li>第五个li</li>
</ul>
<script>
    //因为元素获取的代码在不同浏览器里边不兼容所以需要写兼容代码
    //第一个子元素的获取代码：对象.firstElementChild   --->谷歌火狐支持，IE8undefined
    //第一个子节点获取的代码：对象.firstChild    -----> 谷歌火狐支持，IE8获取的是第一个子元素
    //用函数封装：


    //获取父级元素的第一个子元素：
    function getFirstElementChild (element) {
        if(typeof element.firstElementChild !="undefined"){
            //说明浏览器识别  不是IE8，直接返回
            return element.firstElementChild;
        }else{
            //说明不可以识别，但是为了可以防止是谷歌或者是火狐等浏览器将其识别为子节点
            var node = element.firstElementChild;
            //因为node可能会是在谷歌或者火狐浏览器里边捕获到的子节点
            while(node && node.nodeType != 1){
                //如果node为空，就会进入循环，并且不是标签类型
                //为了排除其他非元素节点的干扰
                node = node.nextSibling;
                //当前元素被下一个元素覆盖
            }
            //如果可以跳出循环，就说明找到了第一个子元素，直接返回
            return node;
        }
    }
    console.log(getFirstElementChild(document.getElementById("uu")).innerText);
</script>
</body>
</html>

结果：