From MDN
The Node.childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0. Child nodes include elements, text and comments.
Which works as expected
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.
But when used in Vue it only logs elements without the text nodes inside.
1: <span>
2: <span>
3: <span>
length: 3
I know you're not suppose to access elements like this in Vue, but I'm wondering if this is normal behavior and why it happens. And how do I get all the nodes inside an element in Vue ?
It is very tricky to compare normal static HTML and what Vue renders because it's "apples vs pears" comparison.
The template you give to a Vue may look like HTML but Vue don't use it as HTML text. It parses the template and produce render function which is just JavaScript code, that generates VNode's (virtual DOM)
And the thing is that during the parsing, Vue tends to ignore all insignificant whitespace by default.
There is a compiler setting that controls the whitespace handling. While default value condense removes most of the whitespace, value preserve will preserve some.
You can compare the difference in online Vue template explorer: