Vlastnosti uzlů: typ, značka a obsah

Získejme trochu hlubší náhled na DOM uzly.

V této kapitole se dozvíme víc o tom, jak vypadají, a naučíme se jejich nejpoužívanější vlastnosti.

Třídy DOM uzlů

Různé DOM uzly mohou mít různé vlastnosti. Například elementový uzel odpovídající značce <a> má vlastnosti týkající se odkazu, uzel odpovídající značce <input> má vlastnosti týkající se vstupu a podobnÄ›. Textové uzly nejsou stejné jako elementové, ale i mezi nimi vÅ¡emi existují společné vlastnosti a metody, jelikož vÅ¡echny třídy DOM uzlů tvoří jednu hierarchii.

Každý DOM uzel náleží do příslušné vestavěné třídy.

Kořenem hierarchie je třída EventTarget. Z ní je zděděna třída Node a z ní jsou zděděny ostatní DOM uzly.

Zde je obrázek, vysvětlení bude následovat:

Třídy jsou:

• EventTarget – je koÅ™enová „abstraktní“ třída pro vÅ¡echno.

  Objekty této třídy nejsou nikdy vytvořeny. Třída slouží jako báze, takže všechny DOM uzly podporují tzv. „události“. Prostudujeme je později.

• Node – je také „abstraktní“ třída, která slouží jako báze pro DOM uzly.

  Poskytuje jádro stromové funkcionality: parentNode, nextSibling, childNodes a podobnÄ› (to jsou gettery). Objekty třídy Node nejsou nikdy vytvoÅ™eny, ale existují další třídy, které jsou z ní zdÄ›dÄ›ny (a tedy dÄ›dí funkcionalitu třídy Node).

• Document, z historických důvodů je z nÄ›j často zdÄ›dÄ›n HTMLDocument (ačkoli nejnovÄ›jší specifikace to nenaÅ™izuje) – je dokument jako celek.

  Přímo do této třídy patří globální objekt document, který slouží jako vstupní bod DOMu.

• CharacterData – „abstraktní“ třída, z níž jsou zdÄ›dÄ›ny:

  • Text – třída odpovídající textu uvnitÅ™ elementů, napÅ™. Ahoj v <p>Ahoj</p>.
  • Comment – třída pro komentáře. Ty se nezobrazují, ale každý komentář se stává prvkem DOMu.

• Element – je základní třídou pro DOM elementy.

  Poskytuje navigaci na úrovni elementů, napÅ™. nextElementSibling nebo children, a vyhledávací metody, napÅ™. getElementsByTagName, querySelector.

  Prohlížeč podporuje nejen HTML, ale také XML a SVG. Třída Element tedy slouží jako báze pro specifičtÄ›jší třídy: SVGElement, XMLElement (ty zde nebudeme potÅ™ebovat) a HTMLElement.

• A konečnÄ› HTMLElement je základní třída pro vÅ¡echny HTML elementy. S ní budeme pracovat vÄ›tÅ¡inu času.

  Jsou z ní zděděny konkrétní HTML elementy:

  • HTMLInputElement – třída pro elementy <input>,
  • HTMLBodyElement – třída pro elementy <body>,
  • HTMLAnchorElement – třída pro elementy <a>,
  • …a podobnÄ›.

Existuje mnoho dalších značek s vlastními třídami, které mohou mít specifické vlastnosti a metody. Naproti tomu nÄ›které elementy, například <span>, <section> nebo <article>, nemají žádné specifické vlastnosti, takže jsou instancemi třídy HTMLElement.

Celá sada vlastností a metod každého uzlu je tedy výsledkem řetězce dědičností.

Uvažujme například DOM objekt pro element <input>. Ten patří do třídy HTMLInputElement.

Jeho vlastnosti a metody jsou sjednocením následujících (vyjmenovány v pořadí dědičnosti):

• HTMLInputElement – tato třída poskytuje vlastnosti specifické pro vstup,
• HTMLElement – poskytuje metody (a gettery/settery) společné pro HTML elementy,
• Element – poskytuje generické metody elementů,
• Node – poskytuje vlastnosti společné pro DOM uzly,
• EventTarget – poskytuje podporu událostí (budou vysvÄ›tleny v dalších kapitolách),
• …a nakonec je vÅ¡e zdÄ›dÄ›no z třídy Object, takže k dispozici jsou i metody „planého objektu“, napÅ™. hasOwnProperty.

Chceme-li vidÄ›t název třídy DOM uzlu, můžeme si vzpomenout, že objekt zpravidla obsahuje vlastnost constructor. Ta se odkazuje na třídní konstruktor a jeho název je v constructor.name:

alert( document.body.constructor.name ); // HTMLBodyElement

…Nebo můžeme prostÄ› použít toString:

alert( document.body ); // [object HTMLBodyElement]

Můžeme také ověřit dÄ›dičnost pomocí instanceof:

alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true

Jak vidíme, DOM uzly jsou obvyklé JavaScriptové objekty a k dědičnosti využívají třídy založené na prototypech.

To je dobÅ™e vidÄ›t i pÅ™i vypsání elementu v prohlížeči příkazem console.dir(elem). V konzoli pak uvidíte HTMLElement.prototype, Element.prototype a tak dále.

// Definice HTMLInputElement
// Dvojtečka ":" znamená, že HTMLInputElement je zděděn z HTMLElement
interface HTMLInputElement: HTMLElement {
  // sem přijdou vlastnosti a metody elementů <input>

  // "DOMString" znamená, že hodnotou vlastnosti je řetězec
  attribute DOMString accept;
  attribute DOMString alt;
  attribute DOMString autocomplete;
  attribute DOMString value;

  // vlastnost s booleovskou hodnotou (true/false)
  attribute boolean autofocus;
  ...
  // teď metoda: "void" znamená, že metoda nevrací žádnou hodnotu
  void select();
  ...
}

Vlastnost „nodeType“

Vlastnost nodeType poskytuje jeÅ¡tÄ› jeden, „staromódní“ způsob, jak získat „typ“ DOM uzlu.

Obsahuje číselnou hodnotu:

• elem.nodeType == 1 pro elementové uzly,
• elem.nodeType == 3 pro textové uzly,
• elem.nodeType == 9 pro objekt dokumentu,
• ve specifikaci je uvedeno nÄ›kolik dalších hodnot.

Příklad:

<body>
  <script>
  let elem = document.body;

  // prozkoumejme: jaký druh uzlu je v elem?
  alert(elem.nodeType); // 1 => element

  // a jeho první dítě je...
  alert(elem.firstChild.nodeType); // 3 => text

  // pro objekt document je typ 9
  alert( document.nodeType ); // 9
  </script>
</body>

V moderních skriptech můžeme ke zjiÅ¡tÄ›ní typu uzlu použít instanceof a další testy založené na třídách, ale nodeType může být nÄ›kdy jednodušší. Vlastnost nodeType můžeme jenom číst, ne mÄ›nit.

Značka: nodeName a tagName

Máme-li DOM uzel, můžeme načíst název jeho značky z vlastností nodeName nebo tagName:

Příklad:

alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY

Je nÄ›jaký rozdíl mezi tagName a nodeName?

Jistě, rozdíl se odráží v jejich názvech, ale to je samozřejmě příliš jemné.

• Vlastnost tagName existuje pouze pro uzly třídy Element.
• Vlastnost nodeName je definována pro každý Node:
  • u elementů má stejný význam jako tagName.
  • u uzlů jiných typů (textové, komentářové atd.) obsahuje Å™etÄ›zec s typem uzlu.

Jinými slovy, tagName je podporována jen v elementových uzlech (protože pochází ze třídy Element), zatímco nodeName nám může nÄ›co říci i o uzlech jiných typů.

Srovnejme například tagName a nodeName pro document a komentářový uzel:

<body><!-- komentář -->

  <script>
    // pro komentář
    alert( document.body.firstChild.tagName ); // undefined (není to element)
    alert( document.body.firstChild.nodeName ); // #comment

    // pro dokument
    alert( document.tagName ); // undefined (není to element)
    alert( document.nodeName ); // #document
  </script>
</body>

Jestliže pracujeme pouze s elementy, můžeme používat tagName i nodeName – není v tom žádný rozdíl.

innerHTML: obsah

Vlastnost innerHTML umožňuje získat HTML kód uvnitř elementu jako řetězec.

Můžeme ji také měnit. Je to tedy jeden z nejsilnějších způsobů, jak měnit stránku.

Následující příklad zobrazí obsah document.body a pak jej celý nahradí za jiný:

<body>
  <p>Odstavec</p>
  <div>Div</div>

  <script>
    alert( document.body.innerHTML ); // načte aktuální obsah
    document.body.innerHTML = 'Nové TĚLO!'; // nahradí jej za jiný
  </script>

</body>

Můžeme se pokusit vložit vadný HTML kód, prohlížeč naše chyby opraví:

<body>

  <script>
    document.body.innerHTML = '<b>test'; // zapomněli jsme uzavřít značku
    alert( document.body.innerHTML ); // <b>test</b> (opraveno)
  </script>

</body>

Pozor: „innerHTML+=“ obsah zcela přepíše

Můžeme pÅ™idat HTML kód do elementu pomocí elem.innerHTML+="další html".

Třeba takto:

chatDiv.innerHTML += "<div>Ahoj<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "Jak se máš?";

Při tom bychom si však měli dávat velký pozor, protože to, co se stane, nebude přidání obsahu, ale jeho úplné přepsání.

Technicky následující dva řádky udělají totéž:

elem.innerHTML += "...";
// je kratší způsob, jak napsat:
elem.innerHTML = elem.innerHTML + "..."

Jinými slovy, innerHTML+= udÄ›lá následující:

1. Odstraní starý obsah.
2. Zapíše místo nÄ›j nový obsah innerHTML (zÅ™etÄ›zení starého a nového obsahu).

Když je obsah „vynulován“ a od základů přepsán, všechny obrázky a další zdroje budou znovu načteny.

V uvedeném příkladu chatDiv řádek chatDiv.innerHTML+="Jak se máš?" znovu vytvoří HTML obsah a znovu načte smile.gif (doufejme, že je v mezipamÄ›ti). Jestliže chatDiv obsahuje spoustu dalšího textu a obrázků, bude opakované načtení jasnÄ› viditelné.

Má to i další vedlejší efekty. Například jestliže návÅ¡tÄ›vník vybral myší existující text, vÄ›tÅ¡ina prohlížečů po pÅ™epsání innerHTML výbÄ›r zruší. A pokud v nÄ›m byl <input>, do nÄ›hož návÅ¡tÄ›vník zadal text, bude tento text odstranÄ›n. A podobnÄ›.

NaÅ¡tÄ›stí kromÄ› innerHTML existují i jiné způsoby, jak pÅ™idat HTML kód. Brzy je prostudujeme.

outerHTML: celý HTML kód elementu

Vlastnost outerHTML obsahuje celý HTML kód elementu. Je to jako innerHTML plus element samotný.

Zde je příklad:

<div id="elem">Ahoj <b>světe</b></div>

<script>
  alert(elem.outerHTML); // <div id="elem">Ahoj <b>světe</b></div>
</script>

Pozor: na rozdíl od innerHTML zápis do outerHTML nezmÄ›ní element, ale místo toho jej v DOMu nahradí novým.

Ano, zní to zvláštně a zvláštní to také je, proto tomu zde věnujeme zvláštní poznámku. Podívejte se.

Uvažujme tento příklad:

<div>Ahoj, světe!</div>

<script>
  let div = document.querySelector('div');

  // nahradí div.outerHTML za <p>...</p>
  div.outerHTML = '<p>Nový element</p>'; // (*)

  // Páni! 'div' je pořád stejný!
  alert(div.outerHTML); // <div>Ahoj, světe!</div> (**)
</script>

To vypadá opravdu divně, že?

Na řádku (*) jsme nahradili div za <p>Nový element</p>. Ve vnÄ›jším dokumentu (DOMu) vidíme místo <div> nový obsah. Ale jak vidíme na řádku (**), hodnota staré promÄ›nné div se nezmÄ›nila!

PÅ™iÅ™azení do outerHTML nezmÄ›ní DOM element (objekt, na který v tomto případÄ› odkazuje promÄ›nná div), ale odstraní jej z DOMu a na jeho místo vloží nový HTML kód.

PÅ™i div.outerHTML=... se tedy stalo následující:

• div byl odstranÄ›n z dokumentu.
• Na jeho místo byl vložen jiný kousek HTML kódu <p>Nový element</p>.
• div má stále svou původní hodnotu. Nový HTML kód se neuložil do žádné promÄ›nné.

Je velmi snadné udÄ›lat tady chybu: zmÄ›nit div.outerHTML a pak pokračovat v práci s div, jako by v sobÄ› mÄ›l nový obsah. Ale tak to není. NÄ›co takového je v pořádku pro innerHTML, ale ne pro outerHTML.

Můžeme do elem.outerHTML zapisovat, ale mÄ›li bychom mít na pamÄ›ti, že tím nezmÄ›níme element, do nÄ›hož zapisujeme (elem). Namísto toho vložíme na jeho místo nový HTML kód. Odkazy na nové elementy můžeme získat prohledáváním DOMu.

nodeValue/data: obsah textového uzlu

Vlastnost innerHTML platí jen pro elementové uzly.

Jiné druhy uzlů, například textové, mají její protÄ›jÅ¡ek: vlastnosti nodeValue a data. Pro praktické použití jsou obÄ› téměř stejné, jsou mezi nimi jen drobné rozdíly ve specifikaci. Budeme tedy používat data, protože je kratší.

Příklad načtení obsahu textového uzlu a komentáře:

<body>
  Ahoj
  <!-- Komentář -->
  <script>
    let text = document.body.firstChild;
    alert(text.data); // Ahoj

    let komentář = text.nextSibling;
    alert(komentář.data); // Komentář
  </script>
</body>

U textových uzlů si dokážeme představit důvod, proč je načítáme nebo měníme, ale u komentářů?

Vývojáři do nich někdy vkládají informace nebo instrukce pro šablony v HTML, například:

<!-- if jeSprávce -->
  <div>Vítáme vás, pane správce!</div>
<!-- /if -->

…Pak JavaScript může číst z jejich vlastnosti data a zpracovat vložené instrukce.

textContent: čistý text

Vlastnost textContent poskytuje přístup k textu uvnitÅ™ elementu: obsahuje pouze text, zbavený vÅ¡ech <značek>.

Příklad:

<div id="zprávy">
  <h1>Titulek!</h1>
  <p>Marťané útočí na lidi!</p>
</div>

<script>
  // Titulek! Marťané útočí na lidi!
  alert(zprávy.textContent);
</script>

Jak vidíme, vrátila nám pouhý text. VÅ¡echny jeho <značky> byly odstranÄ›ny, ale text z nich zůstal.

V praxi je načítání takového textu zapotřebí jen zřídka.

Mnohem užitečnÄ›jší je do textContent zapisovat, protože nám umožňuje „bezpečný“ zápis textu.

Řekněme, že máme libovolný řetězec, například zadaný uživatelem, a chceme jej zobrazit.

• Pomocí innerHTML jej vložíme „jako HTML kód“ se vÅ¡emi HTML značkami.
• Pomocí textContent jej vložíme „jako text“, se vÅ¡emi symboly se zachází doslovnÄ›.

Porovnejte si tyto dva způsoby:

<div id="elem1"></div>
<div id="elem2"></div>

<script>
  let jméno = prompt("Jak se jmenuješ?", "<b>Medvídek Pú!</b>");

  elem1.innerHTML = jméno;
  elem2.textContent = jméno;
</script>

1. První <div> obdrží jméno „jako HTML“: ze vÅ¡ech značek se stanou značky, takže jméno vidíme tučnÄ›.
2. Druhý <div> obdrží jméno „jako text", takže vidíme doslova <b>Medvídek Pú!</b>.

Ve vÄ›tÅ¡inÄ› případů očekáváme, že uživatel zadá text, a chceme s ním zacházet jako s textem. Nechceme mít na stránce neočekávaný HTML kód. PÅ™iÅ™azením do textContent toho dosáhneme.

Vlastnost „hidden“

Atribut hidden a stejnojmenná DOM vlastnost specifikuje, zda je element viditelný nebo ne.

Můžeme jej používat v HTML nebo do něj přiřadit hodnotu v JavaScriptu, třeba takto:

<div>Oba následující divy jsou skryté</div>

<div hidden>Pomocí atributu „hidden“</div>

<div id="elem">JavaScript nastavil vlastnost „hidden“</div>

<script>
  elem.hidden = true;
</script>

Technicky hidden funguje stejnÄ› jako style="display:none", ale je kratší na napsání.

Zde je blikající element:

<div id="elem">Blikající element</div>

<script>
  setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>

Další vlastnosti

DOM elementy mají i další vlastnosti, zejména ty, které závisejí na třídě:

• value – hodnota <input>, <select> a <textarea> (HTMLInputElement, HTMLSelectElement…).
• href – „href“ pro <a href="..."> (HTMLAnchorElement).
• id – hodnota atributu „id“, pro vÅ¡echny elementy (HTMLElement).
• …a mnoho dalších…

Příklad:

<input type="text" id="elem" value="hodnota">

<script>
  alert(elem.type); // "text"
  alert(elem.id); // "elem"
  alert(elem.value); // hodnota
</script>

Většina standardních HTML atributů má odpovídající DOM vlastnost a my k ní můžeme takto přistupovat.

Pokud chcete znát celý seznam podporovaných vlastností v určité třídÄ›, můžete jej najít ve specifikaci. Například HTMLInputElement je zdokumentován v https://html.spec.whatwg.org/#htmlinputelement.

Nebo pokud je chceme rychle zjistit nebo nás zajímá specifikace pro konkrétní prohlížeč, můžeme si prvek vždy vypsat pomocí console.dir(elem) a vlastnosti si pÅ™ečíst. Nebo můžeme prozkoumat „Vlastnosti DOMu“ (DOM properties) v záložce Elements v prohlížečových vývojářských nástrojích.

Shrnutí

Každý DOM uzel patří do určité třídy. Tyto třídy tvoří hierarchii. Výsledkem dědičnosti je celá sada vlastností a metod.

Hlavní vlastnosti DOM uzlů jsou:

nodeType

Můžeme ji použít ke zjiÅ¡tÄ›ní, zda uzel je textový nebo elementový. Vlastnost má číselnou hodnotu: 1 pro elementy, 3 pro textové uzly, nÄ›kolik dalších pro jiné typy uzlů. Pouze pro čtení.

nodeName/tagName

U elementů název značky (velkými písmeny, nejsme-li v režimu XML). U jiných uzlů nodeName popisuje, co je to za uzel. Pouze pro čtení.

innerHTML

HTML obsah elementu. Může být měněn.

outerHTML

Úplný HTML kód elementu. Operace zápisu do elem.outerHTML se nedotkne samotného elem, ale místo toho jej ve vnÄ›jším kontextu nahradí novým HTML kódem.

nodeValue/data

Obsah neelementového uzlu (textového, komentářového). ObÄ› vlastnosti jsou téměř stejné, obvykle používáme data. Mohou být mÄ›nÄ›ny.

textContent

Text uvnitÅ™ elementu: HTML zbavený vÅ¡ech <značek>. Zápis do této vlastnosti vloží text do elementu tak, že se vÅ¡emi speciálními znaky a značkami se bude zacházet jako s textem. Dokáže bezpečnÄ› vložit uživatelem vytvoÅ™ený text a ochránit jej pÅ™ed nechtÄ›nými zmÄ›nami v HTML.

hidden

Když se nastaví na true, udÄ›lá totéž jako display:none v CSS.

DOM uzly obsahují i jiné vlastnosti, které závisejí na jejich třídÄ›. Například elementy <input> (HTMLInputElement) podporují value, type, zatímco elementy <a> (HTMLAnchorElement) podporují href a podobnÄ›. VÄ›tÅ¡ina standardních HTML atributů má odpovídající DOM vlastnost.

Nicméně HTML atributy a DOM vlastnosti nejsou vždy totožné, jak uvidíme v příští kapitole.