1// textContent gets the content of all elements, including <script> and <style> elements.
2// textContent returns every element in the node.
3// innerText only shows “human-readable” elements.
4// innerText looks at styling and won't return the text of “hidden” elements.
5
6<style>
7.special { display: none; }
8</style>
9<h1>Heading <span class="special">Special</span> </h1>
10
11const h1 = document.querySelector('h1');
12console.debug(h1.textContent); // " Heading Special "
13console.debug(h1.innerText); // "Heading"
1innerHTML shows everything inside of the element.
2innerText shows only the text inside of the element.