Question

假设我有类似HTML的内容：

 <html>

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

 </html>

我想获取所有UL元素：

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

现在我想获取所有列表元素：

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>

但是这不起作用...但是getElementById与querySelectAll()一起正常工作。那么如何使用querySelectorAll()使HTMLcollection或NodeList正常工作？

Answer 1

只需在querySelectorAll上仅使用ul > li个查询字符串调用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>

如果您已经具有需要有效调用querySelectorAll的HTMLCollection，它将更加复杂，您必须在HTMLCollection中的每个元素上调用querySelectorAll：

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

请记住两点：

getElementsByTagName返回一个HTMLCollection对象。
您必须从特定的DOM节点调用Element查询方法。

您的最后一条JS行需要进行两项更改：

首先，您需要从ul集合中选择特定的DOM节点。例如：ul[0]
由于您要从<ul>节点查询DOM，因此必须从查询中排除此元素。例如：ul[0].querySelectorAll("li")

请在下面找到最终的修改内容

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

ul > li元素不包含在ul内-它们位于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>

如何从.getElementsByTagNAme（）html元素进行.querySelectAll（）？

3 个答案: