TypeScript or JS- How to select an element and all its children into a HTMLCollection?

Question

Updated The code I have come up with is:

<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("*");

I want the collection to include <section> , <header> , <p> , and <div> the above code only has <header> , <p> , and <div> . Is there anyway I can add the <section> itself to the collection?

The problem is that I want to include the element itself into the elements collection. I know I can use outerHTML and put it in a temp container and then get all the element inside from that but i'm looking for a cleaner way.

Answer 1

You can use a comma-separated list with querySelectorAll , where the first item is the element itself.

This Snippet uses your HTML to retrieve section Test and its children: header , p , and 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>