logo

Základy JavaScriptu č. 6:Objektový model dokumentu

Počínaje tímto článkem se ponoříme do praktické aplikace jazyka JavaScript při vývoji webu. Budeme mluvit o tom, jak mohou JavaScript, HTML a CSS spolupracovat, aby byly vaše webové stránky atraktivnější a interaktivnější.

Struktura DOM

Začněme rychlým přehledem objektového modelu dokumentu. Zde je jednoduchý HTML dokument:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Example Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
        <p>Vestibulum fringilla lorem ac elit suscipit, nec suscipit nunc posuere.</p>
        <p>Proin efficitur eros scelerisque consequat <a href="https://www.ericsdevblog.com/">pulvinar</a>.</p>
    </div>
</body>
</html>

Každý prvek HTML lze vidět jako rámeček. Příklad dokumentu má například následující strukturu:

Pro každý rámeček existuje odpovídající objekt, se kterým můžeme interagovat pomocí JavaScriptu, abychom o něm zjistili další podrobnosti, jako je jeho obsah, atributy atd. Tento druh reprezentace se nazývá objektový model dokumentu nebo DOM pro krátký.

Druhou důležitou vlastností této struktury DOM je, že všechny boxy jsou vzájemně propojeny, což znamená, že pokud vybereme výchozí bod, můžeme se přesunout do jakéhokoli jiného uzlu na stránce.

Například <body> uzel má tři podřízené prvky, <h1> , <p> a <div> . <div> uzel má další dva odstavce (<p> ) má podřízené prvky. Chcete-li tedy najít odstavec s odkazem (<a> ) v tomto vzorovém dokumentu můžeme přejít z <html> na <body> na <div> a nakonec vyhledejte <p> uzel.

JavaScript a HTML

Pro import kódu JavaScript do dokumentu HTML můžeme použít <script> </script> štítek. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Page</title>
</head>
<body>
    ...

    <!--JavaScript-->
    <script>
        ...
    </script>

    <!--JavaScript in External File-->
    <script src="myScript.js"></script>

</body>
</html>

Je obvyklé umístit kód JavaScript před konec <body> štítek. Existují dva způsoby, jak vložit JavaScript, stejně jako CSS, můžete jej spojit s HTML, nebo můžete JavaScript vložit do samostatného souboru. Abychom to usnadnili, v tomto tutoriálu dáme dohromady kód HTML a JavaScript.

JavaScript zachází s každým polem DOM jako s objektem, což nám umožňuje přistupovat k libovolnému prvku v dokumentu HTML pomocí globální vazby document . Například document.body odkazuje na <body> prvek dokumentu. 

<body>
    ...

    <!--JavaScript-->
    <script>
        // Access body element
        let body_element = document.body;

        // Access h1 element
        let h1_element = document.body.firstElementChild;
        console.log(h1_element.tagName);

        // Access paragraph element (with link)
        let p_element = document.body.childNodes[5].lastElementChild;
        console.log(p_element.tagName);
    </script>
</body>

Přejděte do Nástroje pro vývojáře -> Konzole a měli byste vidět, že byly vráceny správné názvy značek.

Všimněte si, že indexové číslo, které používáme k nalezení <div> prvek je 5, protože childNodes() metoda vrátí nejen uzly prvků, ale také textové uzly a uzly komentářů. Například prvek odstavce by měl uzel prvku <p> a textový uzel, který je jeho obsahem.

Při vývoji webu je možné dosáhnout jakéhokoli konkrétního prvku v dokumentu od document.body a sledování pevné cesty vlastností. Nicméně, i když je to možné, je to stále špatný nápad, zvláště když máte velký dokument HTML s komplikovaným stromem vztahů. Je velmi snadné udělat chybu. Naštěstí nám JavaScript nabízí chytřejší způsoby umístění prvků v dokumentu HTML.

Hledání prvků

Již dříve jsme zmínili, že JavaScript zachází se všemi prvky HTML jako s objekty, což znamená, že existují vestavěné metody, které můžeme použít. Ve skutečnosti existují tři metody, které nám mohou pomoci najít prvky v souboru HTML, a ve skutečnosti fungují podobně jako selektory, o kterých jsme hovořili v našem kurzu CSS.

Například všechny prvky HTML mají getElementsByTagName() metoda, která nám pomáhá najít prvky s konkrétní značkou. 

<body>
    <h1>Example Page</h1>
    <p class="paragraphs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <div>
        <p class="paragraphs paragraphs_div">Vestibulum fringilla lorem ac elit suscipit, nec suscipit nunc posuere.</p>
        <p class="paragraphs paragraphs_div" id="paragraph_link">Proin efficitur eros scelerisque consequat <a href="https://www.ericsdevblog.com/">pulvinar</a>.</p>
    </div>

    <!--JavaScript-->
    <script>
        // Get all paragraph elements
        let p_elements = document.body.getElementsByTagName("p");
    </script>
</body>

Tato metoda vrátí kolekci prvků se zadanou značkou a ke každému z nich můžete přistupovat zadáním čísla indexu (jako pole). 

<!--JavaScript-->
<script>
    // Get all paragraph elements
    let p_elements = document.body.getElementsByTagName("p");

    // Get the second paragraph element and print its content
    let second_p = p_elements[1];
    console.log(second_p.innerHTML);
</script>

Nezaměňujte však tuto kolekci se skutečným polem, jsou velmi podobné, ale ne úplně stejné. Nemůžeme přes něj zacyklit pomocí for/of smyčky, musíme použít čísla indexů a spustit prvky pomocí běžného for smyčka. Nebo můžeme tuto kolekci transformovat do pole pomocí Array.from metoda.

Jakmile najdeme prvek, který hledáme, můžeme přistupovat k atributu a obsahu tohoto prvku pomocí tečky (. ) operátor a můžeme také změnit jejich hodnoty:

<!--JavaScript-->
<script>
    // Get all paragraph elements
    let p_elements = document.body.getElementsByTagName("p");

    // Get the second paragraph element
    let second_p = p_elements[1];

    // Print its content
    console.log(second_p.innerHTML);

    // Change its content
    second_p.innerHTML = "Changed content.";

    // Print its attributes
    console.log(second_p.attributes);

    // Access one of the attributes
    console.log(second_p.getAttribute("class"));
</script>

Druhá metoda je document.getElementById() , používá se k nalezení jednoho jediného prvku namísto vracení kolekce prvků. Upozorňujeme, že tato metoda není existují pod každým objektem prvku, neexistují document.body.getElementById() . 

<!--JavaScript-->
<script>
    // Get an element based on ID
    let element = document.getElementById("paragraph_link");
    console.log(element.innerHTML);
</script>

Třetí metoda je nejužitečnější, pomáhá nám najít prvky se stejným názvem třídy. To je getElementsByClassName() , který prohledá celý dokument a najde kolekci prvků se zadaným názvem třídy.

Přidávání a odstraňování prvků

Nakonec je čas promluvit si o tom, jak manipulovat s těmito prvky HTML, jakmile je najdeme. Ve skutečnosti lze ve struktuře DOM změnit téměř vše.

Můžeme například odstranit prvek, jako je tento:

// Get an element based on ID, and then remove it from the page
let element = document.getElementById("paragraph_link");
element.remove();

Nebo můžeme vytvořit nový prvek a přidat jej do struktury DOM:

// Create new paragraph element
let new_p = document.createElement("p");

// Create content for the new p element
let new_text = document.createTextNode("This is a new paragraph.");

// Append the content to the p element node
new_p.appendChild(new_text);

// Add the new paragraph to the DOM structure
let element = document.getElementById("paragraph_link");
element.append(new_p);

Jak jsme již zmínili, prvek odstavce by měl mít <p> element node, za nímž následuje textový uzel představující jeho obsah.

Můžeme také nahradit jeden prvek jiným:

// Replace a paragraph with the new paragraph
let element = document.getElementById("paragraph_link");
element.replaceWith(new_p);

V tomto článku jsme stručně hovořili o tom, jak lokalizovat a manipulovat s prvky HTML pomocí JavaScriptu. Možná jste si však všimli, že všechny změny se provádějí okamžitě, když obnovíme prohlížeč, který není příliš interaktivní. V příštím článku probereme, jaké další události můžeme použít ke spuštění JavaScriptu k provedení akce.