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>