避免在换行后创建 textNode？答案

【问题标题】：Avoid textNode creation after new line?避免在换行后创建 textNode？
【发布时间】：2012-05-09 03:22:42
【问题描述】：

如果我在 HTML 文件中手动编写以下几行：

<div>
<input type="button" value="Button 1">
<input type="button" value="Button 2">
</div>

将为每个新行创建一个文本节点。

我想了解 addEventListener 方法的 useCapture 参数。我选择使用 div 元素的 childNodes 属性访问 DOM 元素，但我将不得不忽略元素之间的 textNodes。这不太实用：

document.getElementsByTagName("div")[0].addEventListener("click", function(){alert(1);}, true);

document.getElementsByTagName("div")[0].childNodes[1].addEventListener("click", function(){alert(2);}, false);

document.getElementsByTagName("div")[0].childNodes[3].addEventListener("click", function(){alert(3);}, false);

您看到我必须忽略 childNodes[0] 和 childNodes[2] 才能选择我的 2 个输入标签。

有没有一种方法可以绕过 textNodes 创建，而无需在一行上编写所有 HTML 代码，也无需使用 Javascript createElement？

是否可以在换行时不创建文本节点而编写 HTML 代码？

【问题讨论】：

在javascript 中是否可以在没有{ } 的情况下在if 中编写两行代码？不，这就是语言的设计和工作方式。同样的事情。
@gdoron in Javascript, C, C++, C#, {} 当我们有超过两行代码时总是需要的
ht我知道...我的意思是说，这是HTML语法规则，就像javascript一样，HTML有它的规则，新行创建一个textNode...:)

标签： javascript html dom textnode

【解决方案1】：

首先，不要重复自己！您一遍又一遍地重复相同的 DOM 查询。

试试这个：

var div = document.getElementsByTagName("div")[0];
div.addEventListener("click", function(){alert(1);}, true);

var buttons = div.getElementsByTagName("button");  
buttons[0].addEventListener("click", function(){alert(2);}, false);
buttons[1].addEventListener("click", function(){alert(2);}, false);

调用 getElementsByTagName 来获取按钮会简单地跳过文本节点 - 问题解决了！

【讨论】：

好的，这只是 3 行示例，但最好放入一个变量。我不想直接访问按钮，因为我之前有其他按钮，并且使用 childNodes 可以很好地访问 div 的按钮
@baptx childNodes 显然不很好，这正是您找到的原因。如果您只对元素感兴趣，让 DOM 为您提供这些元素！
你是对的，它可能很好，但由于这个 textNodes 它不是：/
@baptx 是的，但文本节点是无法避免的，除非您在将内容发送到浏览器之前从内容中去除换行符。
如果我理解正确的话，它必须由服务器作为一行代码发送以避免文本节点。

【解决方案2】：

对不起。唯一的可能是使用 PHP、RUBY 等编程语言生成 HTML 代码并添加类似这样的内容。

<input type="button" value="Button 1"><%-
%><input type="button" value="Button 2">

但我想这不是你想听到的答案。

【讨论】：

我尝试通过以下链接使用 PHP 解析一些行：docs.php.net/manual/en/domdocument.loadhtml.php 如果使用删除 textNodes，顺便将所有内容序列化为一行代码。所以我认为如果页面请求后没有 textNodes，我们无法直接在页面源代码（Firebug 或任何 DOM 检查器除外）中获得人类可读的输出。
我的例子是模式 file.html.erb 中的 Ruby on Rails

【解决方案3】：

是否可以在换行时不创建文本节点而编写 HTML 代码？

没有。

除非您在将 HTML 文件发送到客户端之前对其进行解析，否则我猜该解决方案不是您想要的...

【讨论】：