JavaScript & DOM - Navigacija


Navigacija između DOM čvorova

U prethodnim lekcijama naučili ste kako odabrati pojedinačne elemente na web stranici. Ali postoji mnogo prilika u kojima trebate pristupiti djetetu, roditelju ili elementu pretka. Pogledajte lekciju JavaScript DOM čvorovi da biste razumjeli logičke odnose između čvorova u DOM stablu. DOM čvor pruža nekoliko svojstava i metoda koje vam omogućavaju kretanje kroz strukturu stabla DOM-a i vršenje promjena na vrlo jednostavan način. U sljedećem dijelu naučićemo kako se kretati prema gore, dole i bočno u DOM stablu koristeći JavaScript.



Pristup podređenim čvorovima

Svojstva firstChild i lastChild DOM čvora možete koristiti za pristup prvom i posljednjem izravnom podređenom čvoru čvora. Ako čvor nema nijedan podređeni element, vraća nulu.

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst</span></p>
</div>

<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Ispisuje: #text

var hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Ispisuje: SPAN
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje First i Last Child čvora</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p>
  </div>
  
  <script>
  var main = document.getElementById("main");
  console.log(main.firstChild.nodeName); // Ispisuje: #text
  
  var hint = document.getElementById("hint");
  console.log(hint.firstChild.nodeName); // Ispisuje: SPAN
  </script>
</body>
</html>

Ako ste primijetili u gornjem primjeru, nodeName čvora prvog djeteta glavnog DIV elementa vraća #text umjesto H1, jer razmaci kao što su: razmaci, kartice, novi redovi itd. važeći su znakovi i oni tvore #text čvorove i postaju dio DOM stabla. Budući da oznaka <div> sadrži novu liniju prije oznake <h1>, ona će stvoriti čvor #text.

Da biste izbjegli problem s firstChild i lastChild koji vraćaju čvorove #text ili #comment, mogli biste alternativno koristiti svojstva firstElementChild i lastElementChild za vraćanje samo prvog, odnosno posljednjeg čvora elementa. Ali, to neće raditi u IE 9 i starijim verzijama.

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p>
</div>

<script>
var main = document.getElementById("main");
alert(main.firstElementChild.nodeName); // Ispisuje: H1
main.firstElementChild.style.color = "red";

var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // Ispisuje: SPAN
hint.firstElementChild.style.color = "blue";
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje podređenih čvorove samo elemenata</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p>
  </div>
  
  <script>
  var main = document.getElementById("main");
  console.log(main.firstElementChild.nodeName); // Ispisuje: H1
  main.firstElementChild.style.color = "red";
  
  var hint = document.getElementById("hint");
  console.log(hint.firstElementChild.nodeName); // Ispisuje: SPAN
  hint.firstElementChild.style.color = "blue";
  </script>
</body>
</html>

Slično tome, svojstvo childNodes možete koristiti za pristup svim podređenim čvorovima datog elementa, gdje je prvom podređenom čvoru dodijeljen indeks 0. Evo primjera:

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p>
</div>

<script>
var main = document.getElementById("main");

// Prvo provjerite ima li element podređene čvorove
if(main.hasChildNodes()) {
    var nodes = main.childNodes;
    
    // Prelistajte listu čvorova i prikažite ime čvora
    for(var i = 0; i < nodes.length; i++) {
        alert(nodes[i].nodeName);
    }
}
</script>

childNodes vraća sve podređene čvorove, uključujući čvorove koji nisu elementi poput čvora teksta i komentara. Da biste dobili kolekciju samo elemenata, umjesto toga koristite svojstvo children.



Pristup roditeljskim čvorovima

Svojstvo parentNode možete koristiti za pristup roditelju navedenog čvora u DOM stablu. Nadređeni čvor uvijek će vratiti nulu za čvor dokumenta, jer nema nadređenog.

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p>
</div>

<script>
var hint = document.getElementById("hint");
alert(hint.parentNode.nodeName); // Ispisuje: DIV
alert(document.documentElement.parentNode.nodeName); // Ispisuje: #document
alert(document.parentNode); // Ispisuje: null
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pristup roditeljskim čvorovima</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst</span></p>
  </div>
  
  <script>
  var hint = document.getElementById("hint");
  console.log(hint.parentNode.nodeName); // Ispisuje: DIV
  console.log(document.documentElement.parentNode.nodeName); // Ispisuje: #document
  console.log(document.parentNode); // Ispisuje: null
  </script>
</body>
</html>

Međutim, ako želite dobiti samo čvorove elemenata, možete koristiti svojstvo parentElement, ovako:

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst</span></p>
</div>

<script>
var hint = document.getElementById("hint");
alert(hint.parentNode.nodeName); // Ispisuje: DIV
hint.parentNode.style.backgroundColor = "yellow";
</script>


Pristup čvorima braće i sestara (Sibling Nodes)

Svojstva previousSibling i nextSibling možete koristiti za pristup prethodnom i sljedećem čvoru u DOM stablu. Evo primjera:

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p><hr>
</div>

<script>
var title = document.getElementById("title");
alert(title.previousSibling.nodeName); // Ispisuje: #text

var hint = document.getElementById("hint");
alert(hint.nextSibling.nodeName); // Ispisuje: HR
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje prethodnog i narednog čvora</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p><hr>
  </div>
  
  <script>
  var title = document.getElementById("title");
  console.log(title.previousSibling.nodeName); // Ispisuje: #text
  
  var hint = document.getElementById("hint");
  console.log(hint.nextSibling.nodeName); // Ispisuje: HR
  </script>
</body>
</html>

Kao alternativu, možete koristiti previousElementSibling i nextElementSibling da biste dobili prethodni i sljedeći element brata ili sestre preskačući bilo koji čvor tekstualnog prostora. Sva ova svojstva vraćaju nulu ako nema takvog brata ili sestre. Evo primjera:

<div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neksi tekst.</span></p>
</div>

<script>
var hint = document.getElementById("hint");
alert(hint.previousElementSibling.nodeName); // Ispisuje: H1
alert(hint.previousElementSibling.textContent); // Ispisuje: My Heading

var title = document.getElementById("title");
alert(title.nextElementSibling.nodeName); // Ispisuje: P
alert(title.nextElementSibling.textContent); // Ispisuje: Ovo je neksi tekst.
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Nabavljanje prethodnog i sljedećeg element brata ili sestre</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Naslov</h1>
    <p id="hint"><span>Ovo je neki tekst.</span></p><hr>
  </div>
  
  <script>
  var title = document.getElementById("title");
  console.log(title.previousSibling.nodeName); // Ispisuje: #text
  
  var hint = document.getElementById("hint");
  console.log(hint.nextSibling.nodeName); // Ispisuje: HR
  </script>
</body>
</html>

Svojstvo textContent predstavlja tekstualni sadržaj čvora i svih njegovih potomaka. Pogledajte lekciju o manipulaciji JavaScript DOM-om da biste saznali više o tome.



Vrste DOM čvorova

DOM stablo sastoji se od različitih vrsta čvorova, kao što su elementi, tekst, komentari itd. Svaki čvor ima svojstvo nodeType pomoću kojeg možete saznati s kojim tipom čvora imate posla. Sljedeća tabela navodi najvažnije tipove čvorova:

Konstanta Vrijednost Opis
ELEMENT_NODE 1 Čvor elementa kao što je <p> ili <img>.
TEXT_NODE 3 Stvarni tekst elementa.
COMMENT_NODE 8 Čvor komentara, tj. <!-- neki komentar -->
DOCUMENT_NODE 9 Čvor dokumenta, tj. roditelj elementa <html>.
DOCUMENT_TYPE_NODE 10 Čvor tipa dokumenta, npr. <! DOCTYPE html> za HTML5 dokumente.