相当于jquery所有子选择器的javascript

Question

我有以下jquery选择器，我正尝试将其转换为常规javascript。

$("#lelement>*").on("dblclick", function(){
});

普通javascript相当于什么？ 我可以这样做吗？

document.getElementById('element').childNodes.addEventListener("dblclick", function(e){
});

Answer 1

您必须显式遍历所有与#lelement>*选择器匹配的元素（可以通过querySelectorAll获得集合），然后将处理程序附加到每个元素：

 document.querySelectorAll('#lelement > *').forEach((child) => { child.addEventListener('dblclick', () => console.log('double clicked!')); }); 

 <div id="lelement"> <div>content 1</div> <div>content 2</div> </div> 

请注意， NodeList.forEach并不是一个古老的方法。 并非所有浏览器都支持它。 因此，对于古老的浏览器，请改用polyfill或Array.prototype.forEach ：

 Array.prototype.forEach.call( document.querySelectorAll('#lelement > *'), (child) => { child.addEventListener('dblclick', () => console.log('double clicked!')); } ); 

 <div id="lelement"> <div>content 1</div> <div>content 2</div> </div> 

Answer 2

这将是完全相同的选择器，只是传递给document.querySelectorAll() 。

document.querySelectorAll("#element > *");

然后，您将枚举找到的节点，并使用事件处理程序手动设置每个节点。 由于.querySelectorAll()返回节点列表，因此最好将其转换为Array以便可以在所有浏览器中可靠地调用Array.forEach()方法。

 let elems = Array.prototype.slice.call(document.querySelectorAll("#element > *")); elems.forEach((el) => { el.addEventListener("dblclick", function(){ console.log("You clicked me!"); }); }); 

 <div id="element"> <h1>Some Heading</h1> <p>Some Paragraph</p> <div>Some Div</div> </div> 

Answer 3

一种优雅的，非jQuery的方法是通过querySelectorAll() ：

  document.querySelectorAll('#lelement > *').forEach(function(node) { node.addEventListener("dblclick", function(e){ console.log('double clicked on child of #element'); }); }) 

 p { margin:1rem; background:red; color:white; } 

 <div id="lelement"> <p>Double click me - Child 1</p> <p>Double click me - Child 2</p> </div>