Oft müssen wir den Text aus HTML-Elementen extrahieren. aber
manchmal wundern wir uns über den Unterschied zwischen ihnen. packen wir sie jetzt an. das ist unser HTML-Element:
<h2>
Sub Div
<span>I am hidden</span>
</h2>
Wir möchten den Textteil des obigen Elements extrahieren. lass uns etwas Javascript schreiben (im Grunde Dom-Manipulation),
const heading = document.querySelector('h2');
console.log(heading.textContent);
console.log(heading.innerText);
Sie können in der Browserkonsole sehen. beide Ausgaben sind fast gleich (diejenige, die 'textContent verwendet ' ist nicht richtig getrimmt)
Also, was ist der Unterschied zwischen ihnen? Zum Beispiel fügen wir ein Style-Tag innerhalb des h2-Elements hinzu.
<h2>
Sub Div
<style>
h2 {
background-color: orangered;
}
</style>
<span>I am hidden</span>
</h2>
Jetzt, wenn Sie die console.log erneut ausführen. Sie erhalten dies als Ausgabe
Wir sehen, dass der textContent gibt das gesamte Stilelement zusammen mit Text und innerText an gibt uns den menschenlesbaren Text.
Es gibt noch einen weiteren nützlichen Unterschied zwischen ihnen. Angenommen, wir haben die Sichtbarkeit eines Elements ausgeblendet, indem wir CSS-Regeln angewendet haben, und dann versucht, sie zu extrahieren.
<head>
<style>
h2 span {
display: none;
}
</style>
<head>
<body>
<h2>
Sub Div
<span>I am hidden</span>
</h2>
</body>
Sehen wir uns nun an, was console.log uns liefert:
Wir sehen diesen textContent kümmert sich nicht um die CSS-Regeln, sondern um innerText tut. Also textContent wäre praktisch, wenn wir den Text eines Elements abrufen müssen, das von CSS versteckt ist. 😉
Die anderen beiden Techniken sind innerHtml und outerHtml . Ich denke, wenn wir die Ausgabe in der Browserkonsole sehen, werden wir sie leicht verstehen, da sie ziemlich selbsterklärend sind.
const heading = document.querySelector('h2');
console.log(heading.innerHTML);
console.log(heading.outerHTML);
Sehen wir uns die Ausgabe in der Browser-Konsole an
