javascript equivalent of jquery all children selector

Question

I have the following jquery selector which I am trying to convert to regular javascript.

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

what would the equivalent be with regular javascript ? Can I do this ?

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

Answer 1

You'll have to explicitly iterate over all elements which match the #lelement>* selector (the collection can be obtained with querySelectorAll ), and then attach a handler to each of them:

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

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

Note that NodeList.forEach isn't all that old a method; not all browsers support it. So, for ancient browsers, use a polyfill or Array.prototype.forEach instead:

 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

It would be the exact same selector, just passed to document.querySelectorAll() .

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

Then, you would enumerate the found nodes and manually set each up with an event handler. Since .querySelectorAll() returns a node list, it's best to convert that to an Array so that the Array.forEach() method can be reliably called in all browsers.

 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

One elegant, non-jQuery way to do this would be via 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>