Tato příručka ilustruje, jak získat přístup k vlastnosti „textContent“ prvku HTML DOM a jak s ní manipulovat v JavaScriptu.
Nejprve se podívejte na základy vlastnosti HTML DOM „textContent“.
Co je vlastnost HTML DOM „textContent“ v JavaScriptu?
' textObsah ” je vestavěná vlastnost, která nastavuje, načítá a upravuje text zadaného prvku nebo uzlu včetně všech jeho potomků. Potomci jsou podřízené prvky, jako jsou , , a mnoho dalších, které se používají pro účely formátování. Při nastavování textu pomocí vlastnosti „textContent“ jsou potomci cílového prvku zcela nahrazeni novým textem.
Syntaxe (Nastavit textový obsah)
Základní syntaxe pro nastavení textu prvku/uzlu pomocí „ textObsah “ vlastnost je napsána níže:
živel. textObsah = text | uzel. textObsah = text
Výše uvedená syntaxe přebírá požadované „ text ” jako hodnotu, kterou chce uživatel nastavit pro prvek nebo uzel.
Syntaxe (Získat textový obsah)
Zobecněná syntaxe pro vrácení textu prvku nebo uzlu prostřednictvím „ textObsah “ nemovitost je uvedena zde:
živel. textObsah | uzel. textObsahNávratová hodnota: ' textObsah „vlastnost vrací „ text ” prvku nebo uzlu s mezerami, ale bez jeho vnitřních značek HTML.
Nyní použijte výše definované syntaxe prakticky pro přístup a manipulaci s vlastností „textContent“.
Jak získat přístup k vlastnosti „textContent“ prvku HTML DOM v JavaScriptu a jak s ním manipulovat?
Podobně jako u vlastností „innerHTML“ a „innerText“ je textObsah ” také umožňuje uživatelům snadno nastavit, zpřístupnit a upravit text požadovaného prvku. Tato část provádí všechny tyto operace s prvkem pomocí níže uvedených příkladů.
Příklad 1: Použití vlastnosti „textContent“ pro přístup k textu prvku/uzlu
Tento příklad použije vlastnost „textContent“ k vrácení textu určitého prvku nebo uzlu včetně všech jeho potomků.
HTML kód
< div id = 'myDiv' onmouseover = 'getText()' styl = 'ohraničení: 3px plná černá;šířka: 400px; odsazení: 5px 5px; okraj: auto;' >< h1 > První nadpis < / h1 >
< h2 > Druhý nadpis < / h2 >
< h3 > Třetí nadpis < / h3 >
< h4 > Čtvrtý nadpis < / h4 >
< h5 > Pátý nadpis < / h5 >
< h6 > Šestý nadpis < / h6 >
< / div >
Ve výše uvedených řádcích kódu HTML:
- ' Značka ” s id „myDiv“ vytváří prvek div, který má styl s následujícími vlastnostmi border, width, padding (top and bottom, left and right) a margin. Připojuje také „ onmouseover “ událost, která vyvolá “ getText() “, když na něj uživatel najede myší.
- Uvnitř prvku div vkládají všechny zadané tagy nadpis (h1,h2,h3,h4,h5 a h6) prvky nadpisu podle jejich zadaných úrovní.
JavaScript kód
< skript >
funkce getText ( ) {
byl elem = dokument. getElementById ( 'myDiv' ) ;
upozornění ( živel. textObsah ) ;
}
skript >Ve výše napsaném bloku kódu JavaScript:
- Definujte funkci s názvem „ getText() “.
- Uvnitř této funkce proměnná „elem“ aplikuje „ getElementById() ” pro přístup k prvku div prostřednictvím jeho id.
- ' upozornění() “ metoda vytvoří výstražné pole, které používá „ textObsah vlastnost ” vrátit text nadřazeného prvku div spolu se všemi jeho závislými prvky.
Výstup
Níže uvedený výstup zobrazí výstražné pole zobrazující textový obsah prvku div:
Příklad 2: Použití vlastnosti „textContent“ k nahrazení textového obsahu prvku včetně jeho potomků
Tento příklad ukazuje, jak vlastnost „textContent“ nahradí všechny potomky prvku při úpravě jeho textu.
HTML kód
< centrum >
< h1 id = 'moje hlava' při kliknutí = 'modifyText()' < b > Tento b > je < rozpětí > Nadpis < rozpětí > < i > Živel i > h1 >
centrum >Ve výše uvedených řádcích kódu:
- ' Tag přidá prvek nadpisu úrovně 1 s připojeným „ při kliknutí “ událost, která vyvolá “ upravitText() “, když na něj uživatel klikne.
- Prvek nadpis také obsahuje „ ',' ', a ' ” označuje jako své potomky. Značka „ “ se používá k tučnému vytištění uzavřeného řetězce, značka „“ bez jakékoli vlastnosti stylu se používá k tomu, aby se na daný řetězec neaplikoval žádný styl, a značka „ “ se používá k zobrazení zadaný řetězec jako kurzíva.
JavaScript kód
< skript >
kde h1 = dokument. getElementById ( 'moje hlava' ) ;
řídicí panel. log ( h1 ) ;
funkce upravitText ( ) {
h1. textObsah = 'Vítejte v Linuxhint!' ;
řídicí panel. log ( h1 )
}
skript >Ve výše uvedeném kódu JavaScript:
- Proměnná „h1“ používá „ document.getElementById() ” pro přístup k prvku nadpisu prostřednictvím jeho přiřazeného id.
- ' console.log() ” zobrazí prvek nadpisu na konzole před změnou jeho obsahu.
- Funkce s názvem „ upravitText() “ používá „ textObsah ” pro úpravu textu načteného prvku nadpisu.
- Poslední metoda „console.log()“ po úpravě opět zobrazuje hodnotu „h1“.
Výstup
Konzole jasně ukazuje, že všechny potomky daného prvku nadpisu byly po kliknutí nahrazeny nově zadaným textem:
Příklad 3: Použití vlastnosti „textContent“ k úpravě textu potomka prvku
Tento příklad používá vlastnost „textContent“ k úpravě textu podřízeného prvku konkrétního prvku.
HTML kód
< div id = 'myDiv' styl = 'ohraničení: 3px plná černá;šířka: 400px; odsazení: 5px 5px; okraj: auto;' >
< centrum >
< knoflík id = 'btn' onmouseover = 'changeText()' > Staré tlačítko < / knoflík >
< / centrum >
< / div >V tomto scénáři:
- Element „div“ má prvek „button“, který je vytvořen pomocí „
” tag. - Prvek tlačítka dále obsahuje přiřazené id a „ onmouseover událost, která volá „ změnitText() “, když na něj najedete myší.
JavaScript kód
< skript >
byl parentElement = dokument. getElementById ( 'myDiv' ) ;
var cíl = dokument. getElementById ( 'btn' ) ;
byl find_me = parentElement. obsahuje ( cílová ) ;
-li ( parentElement. obsahuje ( cílová ) == skutečný ) {
řídicí panel. log ( Najdi mě ) ;
změna funkceText ( ) {
cílová. textObsah = 'Nové tlačítko' ;
}
} jiný {
řídicí panel. log ( 'Neexistuje' )
}
skript >Ve výše uvedeném úryvku kódu:
- Proměnná „parentElement“ použije „ getElementById() ” pro přístup k rodičovskému prvku div. Proměnná „target“ také využívá metodu „getElementById()“ k načtení přidaného prvku tlačítka pomocí jeho id.
- Proměnná „find_me“ používá „ obsahuje() ” ke kontrole, zda je cílový prvek tlačítka potomkem prvku div či nikoli. Tato metoda vrátí „ skutečný “ pro „ano“, jinak „nepravda“.
- ' pokud-jinak ” definuje blok kódu.
- Pokud je cílový prvek potomkem nadřazeného prvku, pak „ změnitText() “ funkce změní svůj text pomocí “ textObsah ' vlastnictví. V opačném případě se spustí blok kódu „jinak“ a zobrazí se zadaná zpráva pomocí „ console.log() “ metoda.
Výstup
Konzole zobrazuje „ skutečný ” booleovská hodnota, která ověřuje, že prvek tlačítka je potomkem daného prvku div a jeho text se poté změní, když na něj najedete myší:
Rozdíl mezi vlastnostmi textContent, innerText a innerHTML?
Obecně platí, že „ textObsah ',' vnitřníText ', a ' vnitřní HTML Vlastnosti se zabývají textem prvku nebo uzlu ve způsobu jeho nastavení a získání. Tyto vlastnosti se však od sebe liší na základě některých faktorů. Tato část zdůrazňuje hlavní rozdíly mezi nimi:
Podmínky 'textObsah' 'vnitřní text' 'vnitřní HTML' Typ návratu Vrací text prvku včetně všech jeho potomků (formátovacích značek), skrytého textu CSS a mezery. Nevrací značky HTML prvku. Vrátí textový obsah cíleného prvku HTML se všemi jeho potomky (formátovací značky). Nevrací mezeru, skrytý text CSS a značky HTML kromě