4

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

4

3 回答 3

1

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

没有。

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

于 2012-04-28T18:57:25.147 回答
1

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

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

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

于 2012-04-28T19:07:52.800 回答
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来获取按钮会简单地跳过文本节点 - 问题解决了！

于 2012-04-28T19:16:31.780 回答