Pequeño código reproducible:

 <div id="box"> abc <b>def</b> <p>ghi</p> jk lm <div style="color: green;"> nop </div> </div> <script> let boxElement = document.getElementById("box"); let processChildNode = function(htmlElement) { let childNode = htmlElement.firstChild; while (childNode) { switch(childNode.nodeType) { case Node.ELEMENT_NODE: processChildNode(childNode); break; case Node.TEXT_NODE: let plainText = childNode.nodeValue; console.log(plainText); break; } // Gets next node childNode = childNode.nextSibling; } }; processChildNode(boxElement); </script>

Resultado en la página renderizada en el navegador:

Resultado en la consola de depuración:

 innerText.html:27 abc innerText.html:27 def innerText.html:27 innerText.html:27 ghi innerText.html:27 jk lm innerText.html:27 nop innerText.html:27

El problema es más evidente en el caso de "jk" y "lm". Hay una nueva línea entre ellos en la consola de depuración, no en la página renderizada...

Noté que "innerText" puede hacerlo por mí, pero esta variable no está disponible en el elemento de nodo. ¿Cómo puedo arreglar eso?

PD.

Para mí es importante procesar el nodo por separado. no puedo hacer eso:

 console.log(boxElement.innerText)