How to .querySelectAll() from .getElementsByTagNAme() html element?

16
June 16, 2019, at 12:00 PM

Let suppose I have HTML like:

 <html>
 <body>
     <ul>
         <li>list</li>
         <li>2</li>
         <li>3</li>
     </ul>
     <div>div</div>
     <p>something else</p>
 </body>
 </html>

and I want to get all UL elements:

var ul = document.getElementsByTagName("ul");

Now I would like to get all list elements:

var allListElements = ul.querySelectorAll("ul > li");

var ul = document.getElementsByTagName("ul"); 
var allListElements = ul.querySelectorAll("ul > li");
<ul> 
  <li>list</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<div>div</div> 
<p>something else</p>

However this is not working... but getElementById is working fine with querySelectAll(). So how to make to work HTMLcollection or NodeList with querySelectorAll()?

Answer 1

Just call querySelectorAll with the ul > li query string alone, on the document:

var allListElements = document.querySelectorAll("ul > li"); 
console.log(allListElements);
<ul> 
<li>list</li> 
<li>2</li> 
<li>3</li> 
</ul> 
 
<div>div</div> 
<p>something else</p>

If you already have an HTMLCollection that you need to effectively call querySelectorAll on, it'd be more complicated, you'd have to call querySelectorAll on each element in the HTMLCollection:

var uls = document.getElementsByTagName("ul"); 
var allListElements = [...uls].reduce((a, ul) => { 
  a.push(...ul.querySelectorAll('li')); 
  return a; 
}, []); 
console.log(allListElements);
<ul> 
<li>list</li> 
<li>2</li> 
<li>3</li> 
</ul> 
 
<div>div</div> 
<p>something else</p>

Answer 2

Two things to keep in mind:

  1. getElementsByTagName returns a HTMLCollection object.
  2. You must call Element query methods from an specific DOM node.

Your last JS line needs two changes:

  1. First, you need to select the specific DOM node from the ul collection. Ex: ul[0]
  2. Since you are querying the DOM from to the <ul> node you must exclude this element from the query. Ex: ul[0].querySelectorAll("li")

Please find the final edits below:

var ul = document.getElementsByTagName("ul"); 
var allListElements = ul[0].querySelectorAll("li"); 
 
console.log(allListElements)
<html> 
<body> 
 
<ul> 
<li>list</li> 
<li>2</li> 
<li>3</li> 
</ul> 
 
<div>div</div> 
<p>something else</p> 
 
</body> 
</html>

Answer 3

The ul > li elements are not contained inside the ul - they're on the document. Use that query string:

var allListElements = [...document.querySelectorAll("ul > li")]; 
console.log(allListElements);
<ul> 
  <li>list</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
 
<div>div</div> 
<p>something else</p>

READ ALSO
React hook setState arguments

React hook setState arguments

I would like to know the difference between the following two versions of codeBoth versions do the same

52
Angular material data table not displaying service data

Angular material data table not displaying service data

I'm trying to display some data in angular material data-table,my service class method has data but its not displaying in data-table, please help me ,am unable to find mistake in data-table from last 3 hours

26
How to create child object inside array on each click in javascript

How to create child object inside array on each click in javascript

I want to insert object as a child of existing last object on every click of a button

23