Question

如果我在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？

在转到新行时，是否可以在不创建textNodes的情况下编写HTML代码？

Answer 1

在转到新行时，是否可以在不创建textNodes的情况下编写HTML代码？

<强>不。

除非您在将HTML文件发送到客户端之前对其进行解析，否则我认为解决方案不是您所追求的...

Answer 2

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

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

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

Answer 3

首先，不要重复！你一遍又一遍地重复相同的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来获取按钮可以轻松跳过文本节点 - 问题解决了！

新行后避免创建textNode？

3 个答案: