首尾节点和兄弟节点

最新推荐文章于 2022-03-14 22:39:18 发布

原创最新推荐文章于 2022-03-14 22:39:18 发布

· 492 阅读

0 ·

版权

Javascript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在IE6-8和高级浏览器中firstChild与firstElementChild的区别。在IE6-8中，firstChild仅考虑元素节点，忽略文本和注释节点；而在高级浏览器中，firstChild会包含标签间的空格作为文本节点。因此，为确保准确获取元素节点，需在高级浏览器中使用firstElementChild，并在不支持的浏览器中使用firstChild。

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

<!-- 首尾节点和兄弟节点：
将ul中的第一个li的背景颜色设置为红色
1. 获取ul和li
2. 将ul的firstChild.style.backgroundColor = "red"
3. 兼容性问题也要考虑到 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
    <script>
        window.onload = function () {
            var oUlList = document.getElementById("UlList");
            // // IE 6 - 8
            // oUlList.firstChild.style.backgroundColor = "red";

            // // 高级浏览器
            // oUlList.firstElementChild.style.backgroundColor = "red";

            if (oUlList.firstElementChild) {
                oUlList.firstElementChild.style.backgroundColor = "red";
            }
            else {
                oUlList.firstChild.style.backgroundColor = "red";
            }
        }
    </script>
</head>

<body>
    <ul id="UlList">
        <li>啊大水法大水法</li>
        <li>发生过阿三发射点发</li>
        <li>啊十分士大夫s'd</li>
        <li>士大夫撒旦发sd</li>
        <li>啊是发噶似的发</li>
    </ul>
</body>

</html>

IE6-8：firstChild是指元素节点，会自动忽略文本节点和注释节点
高级浏览器：firstChild会把标签之间的空格当作文本节点，所以为了准确找到相应元素节点，会使用firstElementChild
所以，因为高级浏览器里同时有firstChild和firstElementChild，需要把firstElementChild放在if判断中，firstChild放在else中