时间戳

首页 > 解决方案 > 为什么将文本元素作为元素插入到父 div 的子节点之间？

javascript - 为什么将文本元素作为元素插入到父 div 的子节点之间？

问题描述

下面的 HTML 有一个 idcontainerId具有三个 childdiv的 div。脚本标签获取带有 id 的 div 并打印出它的childNodes.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title>Child nodes</title>
</head>

<body>
    <div id="containerId">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script type="text/javascript">
        const element = document.getElementById("containerId");
        console.log(element.childNodes)
    </script>
</body>

</html>

devtools 中的结果是

NodeList(7)0: text
1: div
2: text
3: div
4: text
5: div
6: textlength: 7
__proto__: NodeList

为什么那些文本元素在那里？当我使用 React 时，我在所有其他前端层的常规设置中看不到这一点。我需要做些什么来避免这种情况？

标签： javascripthtml

解决方案

这些是 HTML 中的回车或空格。

您可以使用 chrome 开发工具 ( View > Developer > Developer Tools) 并在将其打印到控制台 (Console选项卡) 后单击每个节点旁边的箭头以查看详细信息。

这是另一个提示，如果您$0在开发控制台中键入，它将针对您在Elements窗格中突出显示的确切节点...这将允许您轻松调试和调查。

如果您不希望这样，请从 HTML 中删除换行符和空格，如下所示<div></div><div></div><div></div>：

在此处输入图像描述

编辑：好的，您可以使用一个技巧来防止这种情况（根据您的评论）。当您将项目居中inline-block并且不希望空间在页面上可见时，也可以使用此选项。你可以这样隔开：

<div class="wrapper">
  <div>Some text</div><div>
   Some text</div><div>
   Some text</div><div>
   Some text</div>
</div>

推荐阅读