textContentobtiene el contenido de todos los elementos, incluidos los elementos<script>y<style>. Por el contrario,innerTextsolo muestra elementos "legibles por humanos".
textContentdevuelve todos los elementos del nodo. Por el contrario,innerTextes consciente del estilo y no devolverá el texto de los elementos "ocultos".- https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
Entonces parece que innerText debería ignorar los elementos invisibles, pero en realidad no lo hace. ¿Por qué? Parece que entendí mal algo.
Ejemplo 1
const style = document.querySelector('style'); style.textContent = 'p { color: red; }'; // works style.innerText = 'p { color: red; }'; // works. But why? console.log(style.textContent); // works console.log(style.innerText); // works. But why? html { font-family: sans-serif; } <p>foo</p>Ejemplo 2
const invisibleDiv = document.querySelector('div'); console.log(invisibleDiv.innerText); // works. But why? <div style="display: none;"> invisible div </div>La diferencia solo se aplica a los elementos que están anidados dentro del elemento, no al texto del elemento en sí.
console.log("outer.textContent:", outer.textContent); console.log("outer.innerText:", outer.innerText); console.log("inner.textContent:", inner.textContent); console.log("inner.innerText:", inner.innerText); <div id="outer">This is visible <span id="inner" style="display: none;">This is invisible</span></div>Porque el elemento todavía está en el DOM en el momento en que JavaScript hace referencia a él .
Para forzar la falla de la alerta, debe eliminar el elemento con algo como.remove() y luego (intentar) hacer referencia a él.
Como puede ver a continuación, incluso la resolución de Promise aún conserva el .innerText existente, ya que la referencia se hizo antes de que se actualizara el elemento. Es necesario actualizar explícitamente la referencia:
let invisibleDiv = document.getElementById('alert'); const resolvedProm = Promise.resolve(invisibleDiv.remove()); let thenProm = resolvedProm.then(value => { console.log(invisibleDiv.innerText); // Still exists invisibleDiv = document.getElementById('alert'); console.log(invisibleDiv); // No longer exists return value; }); <div id="alert">invisible div</div>