firstChild、lastChild使用时存在的问题以及解决办法

  • 作者:村长
  • 发布时间:2020-05-08 13:37
  • 分类:JavaScript
  • 标签: 热门推荐

我们在使用firstChild、lastChild时会发现获取不到嵌套下的对应标签,这是因为获取到的节点为空字符。

firstChild 获取当前元素节点下的第一个子节点。

  • 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点。

  • 没有子节点则返回null

下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点,因为兼容问题,
. 在IE9+和其他标准浏览器中,div与p之间的空白区域被认为是第一个子节点为空白节点(即文本节点),div显示数字3。
. 在IE8和IE8以下浏览器中,div显示数字1,是元素节点。声明 <!DOCTYPE>,与IE9+和其他标准浏览器一致。

<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //3      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

这里我们可以这样做
把空白部分清空(根据具体需求,这里不推荐)

<div id="demo"><p >我是第1个p</p><p >我是第2个p</p><p >我是第3个p</p></div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

也可以使用firstElementChild代替firstChild

<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstElementChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>


其他演示使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的使用</title>
</head>
<body>
    <style>
        .con{
            width:100px;
            height:100px;
            background: tomato;
        }
    </style>
    <div class="con">这是一个盒子哦</div><div id="box"><a href="">哈哈哈</a><a href="">2222</a><a href="">3333</a></div>
    <input type="button" value="父节点添加样式" onclick="addParent()">
    <input type="button" value="子节点添加样式" onclick="addChild()">
    <input type="button" value="第一个节点" onclick="first()">
    <input type="button" value="最后一个节点" onclick="last()">
    <input type="button" value="当前节点的前一个兄弟节点" onclick="prev()">
    <input type="button" value="当前节点的后一个兄弟节点" onclick="back()">
    <script>
        var box = document.getElementById("box");
        function addParent()
        {
            box.parentNode.style.background = "tomato";
        }
        function addChild()
        {
            var length = box.childNodes.length;
            var lis = box.childNodes;
            for(var i=0;i<length;i++)
            {
                if(lis[i].nodeType == 3)
                {
                    console.log(lis[i]);
                }
            }
        }
        //获取第一个节点
        function first()
        {
            // 如果使用firstChild获取,它的下一个节点存在空字符,那么获取到的是空文本。 如果想获取第一个标签,可以通过firstElementChild获取。
            // var first = document.getElemenById("box").firstChild;
            var first = document.getElementById("box").firstElementChild;
            console.log(first);
            first.style.color = "red";
        }
        function last()
        {
            // 如果使用firstChild获取,它的下一个节点存在空字符,那么获取到的是空文本。 如果想获取第一个标签,可以通过firstElementChild获取。
            var last = document.getElementById("box").lastChild;
            // var last = document.getElementById("box").lastElementChild;
            console.log(last);
            last.style.color = "red";
        }
        function prev()
        {
             //注意节点间不能有空格!! 建议用previousElementSibling
            var prev = document.getElementById("box").previousSibling;
            prev.style.background = "blue";
        }
        function back()
        {
            //注意节点间不能有空格!! 建议用nextElementSibling
            var back = document.getElementsByClassName("con")[0].nextSibling;
            back.style.background = "red";
        }
    </script>
</body>
</html>


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP