Často potřebujeme extrahovat text z prvků Html. ale
někdy si lámeme hlavu nad rozdílem mezi nimi. pojďme se s nimi teď vypořádat. toto je náš html prvek:
<h2>
Sub Div
<span>I am hidden</span>
</h2>
chceme, extrahovat textovou část výše uvedeného prvku. pojďme napsat nějaký javascript (v podstatě dom-manipulace),
const heading = document.querySelector('h2');
console.log(heading.textContent);
console.log(heading.innerText);
Můžete vidět v konzole prohlížeče. oba výstupy jsou téměř stejné (ten, který používá 'textContent ' není správně oříznut)
Jaký je tedy mezi nimi rozdíl? Například do prvku h2 přidáme značku stylu.
<h2>
Sub Div
<style>
h2 {
background-color: orangered;
}
</style>
<span>I am hidden</span>
</h2>
nyní, pokud se znovu přihlásíte do konzole. dostanete to jako výstup
Vidíme, že textContent dává celý prvek stylu spolu s textem a innerText nám dává lidsky čitelný text.
Je mezi nimi ještě jeden užitečný rozdíl. předpokládejme, že jsme skryli viditelnost prvku použitím pravidel css a pak se je pokusili extrahovat.
<head>
<style>
h2 span {
display: none;
}
</style>
<head>
<body>
<h2>
Sub Div
<span>I am hidden</span>
</h2>
</body>
Nyní se podívejme, co nám konzola.log poskytuje:
Vidíme tento textContent nezajímá pravidla css, ale innerText dělá. Takže textContent by bylo užitečné, pokud potřebujeme získat text prvku, který je skrytý pomocí CSS. 😉
Další dvě techniky jsou innerHtml a outerHtml . Myslím, že pokud uvidíme výstup v konzole prohlížeče, snadno jim porozumíme, protože jsou docela samozřejmé.
const heading = document.querySelector('h2');
console.log(heading.innerHTML);
console.log(heading.outerHTML);
podívejme se na výstup v prostředí prohlížeče
