gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:12:55 24 4
gpt4 key购买 nike

下面的 HTML 有一个 ID 为 containerId 的 div,它具有三个子 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>

开发工具中的结果是

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

为什么会有这些文本元素?当我使用 React 时,我在所有其他前端层的常规设置中没有看到这一点。我需要做什么才能避免这种情况?

最佳答案

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

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

如果您输入 $0,这里还有另一个提示在开发控制台中,它将针对您在 Elements 中突出显示的确切节点 Pane ...这将使您能够轻松调试和调查。

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

enter image description here

编辑:好的,您可以使用一个技巧来防止这种情况(根据您的评论)。当您使用 inline-block 将项目居中时,也会使用此选项。并且不希望该空间在页面上可见。您可以像这样间隔它:

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

关于javascript - 为什么文本元素作为元素插入到父 div 的子节点之间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58862322/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com