gpt4 book ai didi

javascript - 如何 .querySelectorAll() 形成 .getElementsByTagNAme() html 元素?

转载 作者:行者123 更新时间:2023-11-28 17:03:32 24 4
gpt4 key购买 nike

假设我有这样的 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() 一起正常工作。那么如何使 HTMLcollection 或 NodeList 与 querySelectorAll() 一起工作呢?

最佳答案

只需在文档上仅使用ul > li查询字符串调用querySelectorAll即可:

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,那么情况会更复杂,您必须对其中的每个元素调用 querySelectorAll HTML 集合:

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>

关于javascript - 如何 .querySelectorAll() 形成 .getElementsByTagNAme() html 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56615949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com