Referenced from MDN
The Node.childNodes property obtains a dynamic NodeList that consists of all child nodes within the specified element, starting with index 0. Child nodes can comprise elements, text, and comments.
This functionality performs as anticipated
btn.addEventListener('click', ()=>{
console.log(container.childNodes)
}) <div id="container">
<span>A</span>
<span>B</span>
<span>C</span>
</div>
<button id='btn'>Log Nodes</button>0: "#text"
1: <span>
2: "#text"
3: ...
length: 7
This logs every node including text nodes, etc.
However, when utilized in Vue, it solely logs elements but not the accompanying text nodes inside them.
1: <span>
2: <span>
3: <span>
length: 3
I acknowledge that accessing elements in this manner is not recommended in Vue, yet I am curious if this behavior is standard and the reasoning behind it. Also, how can I fetch all nodes contained within an element in Vue?