javascript - TypeScript 或 JS-如何将一个元素及其所有子元素选择到 HTMLCollection 中？

Question

已更新我想出的代码是:

<section id="Test">
   <header>Welcome</header>
   <p>This is a test</p>
   <div>Nothing here</div>
</section>

var element =  document.getElementById("Test");
var elements = <HTMLCollection>element.getElementsByTagName("*");

我希望该集合包含 <section> , <header> , <p> ，和<div>上面的代码只有<header> , <p> ，和<div> 。无论如何我可以添加 <section>本身到集合中？

问题是我想将元素本身包含到元素集合中。我知道我可以使用outerHTML并将其放入临时容器中，然后从中获取所有元素，但我正在寻找一种更干净的方法。

Answer 1

您可以使用逗号分隔的列表 querySelectorAll ，其中第一项是元素本身。

此代码段使用您的 HTML 来检索 Test 节及其子节:header、p 和 div :

var elements= document.querySelectorAll('#Test, #Test *');
console.log(elements.length); //4

<section id="Test">
   <header>Welcome</header>
   <p>This is a test</p>
   <div>Nothing here</div>
</section>