JavaScript学习笔记——firstchild的问题

在学习获取元素的时候发现了这样一个问题

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="box1">
        <div id="box2">
            <a href="#">a1</a>
        </div>

    <script>

        var type = document.querySelector("#box2");
        var type1 = document.querySelector("#box2").firstChild;

        console.log([type]);
        console.log(type1.nodeType);

    </script>
</body>
</html>

firstChild指的是第一个子节点（包括标签、空文档和换行节点）

所以按道理 type1.nodeType 应该输出是1，但是实际运行后，输出却是3

相应的 [type] 中的 childNodes 节点如下

在这里插入图片描述
那么这个多出来的text是哪里来的呢？

而之后我将a标签与其父元素放到一行的时候，发现输出正常了，为1

看来问题出在a标签与父元素之间，但是检查后发现这两者之间并没有空格，而多出来的text为空白符，所以上网查了一下空白符的含义如下

空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格

那么问题就就解决了，原因就是空格、制表符和回车都算做空白符；所以如果换行的话，运行的时候会多出一个空白符的text

所以在使用firstChild的时候要留意父子元素之间是否有空格、制表符和回车，根据情况及时调整

JavaScript学习笔记——firstchild的问题

猜你喜欢