HTML DOM elementi

Z JavaScriptom in HTML DOM lahko ustvarjamo, dodajamo, odstranjujemo in zamenjujemo HTML elemente oziroma vozlišča. Tako lahko med izvajanjem programa spreminjamo samo strukturo dokumenta, ne le njegove vsebine ali sloga.

Osnovna pravila

• Nov element ustvarimo z metodo document.createElement().
• Besedilo elementa lahko ustvarimo z metodo document.createTextNode() ali ga nastavimo z lastnostjo textContent.
• Element vstavimo v dokument z metodama appendChild() ali insertBefore().
• Element odstranimo z metodo removeChild(), pri elementih pa pogosto tudi z metodo remove().
• Pri zamenjavi vozlišč mora biti pri metodi replaceChild() pravilni vrstni red argumentov: najprej novo vozlišče, nato staro.

Ustvarjanje novega elementa

Da dodamo nov element v dokument, ga moramo najprej ustvariti. Ustvarjeni element še ni v dokumentu, dokler ga ne vstavimo v obstoječe drevo vozlišč.

<article id="clanek">
   <p id="p1">To je prvi odstavek.</p>
   <p id="p2">To je drugi odstavek.</p>
</article>

<script>
const odstavek = document.createElement("p");
odstavek.textContent = "To je nov odstavek.";

const element = document.getElementById("clanek");
element.appendChild(odstavek);
</script>

Enak učinek lahko dosežemo tudi tako, da ustvarimo besedilno vozlišče posebej in ga nato dodamo elementu:

const odstavek = document.createElement("p");
const besedilo = document.createTextNode("To je nov odstavek.");
odstavek.appendChild(besedilo);

Dodajanje vozlišč

Metoda appendChild() doda vozlišče na konec seznama otrok. Če želimo element vstaviti pred določeno obstoječe vozlišče, uporabimo metodo insertBefore().

<article id="clanek1">
   <p id="p11">To je prvi odstavek.</p>
   <p id="p22">To je drugi odstavek.</p>
</article>

<script>
const odstavek = document.createElement("p");
odstavek.textContent = "To je nov odstavek.";

const element = document.getElementById("clanek1");
const prviOtrok = document.getElementById("p11");

element.insertBefore(odstavek, prviOtrok);
</script>

Pri sodobnih elementih lahko pogosto uporabimo tudi metodi append() in prepend(), vendar je pri razlagi osnov DOM še vedno zelo pomembno poznati appendChild() in insertBefore().

Odstranjevanje vozlišč

Klasičen način odstranitve vozlišča je metoda removeChild(), pri kateri moramo poznati starša elementa. Pri elementnih vozliščih pa je danes pogosto uporabna tudi metoda remove().

<article id="clanek2">
   <p id="p111">To je prvi odstavek.</p>
   <p id="p222">To je drugi odstavek.</p>
</article>

<script>
const stars = document.getElementById("clanek2");
const otrok = document.getElementById("p111");
stars.removeChild(otrok);
</script>

Primer sodobnejšega odstranjevanja:

const otrok = document.getElementById("p111");
otrok.remove();

Zamenjava vozlišč

Če želimo element zamenjati z drugim elementom, uporabimo metodo replaceChild(). Prvi argument je novo vozlišče, drugi pa vozlišče, ki ga zamenjamo.

<article id="clanek3">
   <p id="p1111">To je prvi odstavek.</p>
   <p id="p2222">To je drugi odstavek.</p>
</article>

<script>
const odstavek = document.createElement("p");
odstavek.textContent = "To je nov odstavek.";

const stars = document.getElementById("clanek3");
const otrok = document.getElementById("p1111");

stars.replaceChild(odstavek, otrok);
</script>

Priporočila

• Za deklaracijo spremenljivk uporabljaj const ali let.
• Pri vstavljanju navadnega besedila praviloma uporabljaj textContent.
• Pred odstranitvijo ali zamenjavo preveri, ali element res obstaja v dokumentu.
• Pri vstavljanju pred določen element pazi, da je drugi argument metode insertBefore() veljavno referenčno vozlišče ali null.
• Pri zamenjavi si zapomni vrstni red argumentov metode replaceChild(): novo, staro.

Pogoste napake

• Za navadno besedilo se uporabi innerHTML, čeprav je primernejši textContent.
• Pri metodi replaceChild() je napačen vrstni red argumentov.
• Pri metodi removeChild() se ne upošteva, da mora biti podan dejanski otrok izbranega starša.
• Uporablja se var, čeprav je v sodobni kodi praviloma primernejša uporaba let ali const.
• Predpostavi se, da dodajanje z appendChild() ustvari kopijo vozlišča, čeprav ga v resnici premakne.