如果我在 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 代码而不在换行时创建 textNode?p>
最佳答案
首先,不要重复自己!您一遍又一遍地重复相同的 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
获取按钮会简单地跳过文本节点 - 问题已解决!
关于javascript - 避免在换行后创建 textNode?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10366540/