JavaScript & DOM - Selektori

Odabir DOM elemenata u JavaScript

JavaScript se najčešće koristi za dobijanje ili izmjenu sadržaja ili vrijednosti HTML elemenata na stranici, kao i za primjenu nekih efekata poput prikaza, skrivanja, animacija itd. Ali, prije nego što možete izvršiti bilo koju radnju potrebno je pronaći ili odabrati ciljni HTML element. U sljedećem dijelu vidjećete neke od uobičajenih načina odabira elemenata na stranici i kako da učinite nešto s njima pomoću JavaScript.


Odabir najviših elemenata

Najviši elementi u HTML dokumentu dostupni su direktno kao svojstva dokumenta. Na primjer, elementu <html> može se pristupiti sa svojstvom document.documentElement, dok se elementu <head> može pristupiti sa svojstvom document.head, a elementu <body> može se pristupiti sa svojstvom document.body. Pogledajmo primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Odaberite najvišeg elementa</title>
</head>
<body>
    <script>
    // Prikazivanje vrijednosti atributa jezika html elementa
    alert(document.documentElement.getAttribute("lang")); // Ispisuje: en
    
    // Postavljanje pozadinske boje elementa
    document.body.style.background = "yellow";
    
    // Prikazivanje imena oznake prvog podređenog elementa
    alert(document.head.firstElementChild.nodeName); // Ispisuje: meta
    </script>
</body>
</html>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Odaberite najvišeg elementa</title>
</head>
<body>
    <script>
    // Ispisivanje vrijednosti atributa lang elementa html
    document.write(document.documentElement.getAttribute("lang")); // Ispisuje: en
    document.write("<br>");
    
    // Postaviljanje pozadinske boje elementa tijela
    document.body.style.background = "yellow";
    
    // Ispisuje ime oznake prvog podređenog elementa
    document.write(document.head.firstElementChild.nodeName); // Ispisuje: meta
    </script>
</body>
</html>

Ali, budite oprezni. Ako se document.body koristi prije oznake <body> (npr. unutar <head>), vratiće nulu umjesto elementa body. Budući da tačka u kojoj se skripta izvršava, pretraživač nije analizirao oznaku <body>, pa je document.body u tom trenutku ništavan. Pogledajmo sljedeći primjer da bismo ovo bolje razumjeli: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Document.body Demo</title>
    <script>
    alert("From HEAD: " + document.body); // Ispisuje: null (budući da <body> još nije raščlanjen)
    </script>
</head>
<body>
    <script>
    alert("From BODY: " + document.body); // Ispisuje: HTMLBodyElement
    </script>
</body>
</html>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pristup elementu body s druge lokacije</title>
    <script>
        document.write("From HEAD: " + document.body); // Ispisuje: null (budući da <body> još nije raščlanjen)
    </script>
</head>
<body>
    <hr>
    <script>
        document.write("From BODY: " + document.body); // Ispisuje: HTMLBodyElement
    </script>
</body>
</html>

Odabir elemenata prema ID-u

Element možete odabrati na osnovu njegovog jedinstvenog ID-a pomoću metode getElementById(). Ovo je najlakši način za pronalaženje HTML elementa u DOM stablu. Sljedeći primjer odabira i ističe element koji ima ID atribut id = "mark". 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Odaberite element prema ID-u</title>
</head>
<body>
    <p id="mark">Ovo je neki paragraf.</p>
    <p>Ovo je neki drugi paragraf.</p>

    <script>
    // Odabir elementa sa oznakom id
    var match = document.getElementById("mark");
     
    // Isticanje pozadine elementa
    match.style.background = "yellow";
    </script>
</body>
</html>

Metoda getElementById() vratiće element kao objekt, ako je pronađen odgovarajući element ili nula u dokumentu, ako nije pronađen odgovarajući element.


Odabir elemenata prema nazivu klase

Slično tome, možete koristiti metodu getElementsByClassName() za odabir svih elemenata koji imaju specifična imena klasa. Ova metoda vraća objekt nalik na niz svih podređenih elemenata koji imaju sva zadana imena klasa. Pogledajmo sljedeći primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Selektovanje elemenata prema nazivu klase</title>
</head>
<body>
    <p class="test">Ovo je neki paragraf.</p>
    <div class="block test">Ovo je neki drugi paragraf.</div>
    <p>Ovo je neki treći paragraf.</p>    

    <script>
    // Odabir elemenata sa klasom test
    var matches = document.getElementsByClassName("test");
        
    // Prikaz broja odabranih elemenata
    document.write("Broj odabranih elemenata: " + matches.length);
     
    // Primjena podebljanog stila na prvi element u odabiru
    matches[0].style.fontWeight = "bold";
        
    // Primjena kurzivnog stila (italic) na posljednji element u odabiru
    matches[matches.length - 1].style.fontStyle = "italic";
        
    // Isticanje pozadine svakog elementa kroz petlju
    for(var elem in matches) {  
        matches[elem].style.background = "yellow";
    }
    </script>
</body>
</html>

Odabir elemenata prema nazivu oznake

Takođe možete odabrati HTML elemente prema nazivu oznake pomoću metode getElementsByTagName(). Ova metoda takođe vraća objekt nalik na niz svih podređenih elemenata s datim imenom oznake. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Odaberite elemenata prema nazivu oznake</title>
</head>
<body>
    <p>Ovo je paragraf.</p>
    <div class="test">Ovo je neki drugi paragraf.</div>
    <p>Ovo je još neki paragraf.</p>   
 
    <script>
    // Odabir svih elemenata paragrafa (pasusa)
    var matches = document.getElementsByTagName("p");
        
    // Ispis broja odabranih paragrafa (pasusa)
    document.write("Broj odabranih elemenata: " + matches.length);
     
    // Isticanje pozadine svakog paragrafa (pasusa) kroz petlju
    for(var elem in matches) {  
        matches[elem].style.background = "yellow";
    }
    </script>
</body>
</html>

Odabir elemenata pomoću CSS selektora

Možete koristiti metodu querySelectorAll() za odabir elemenata koji odgovaraju navedenom CSS selektoru. CSS selektori pružaju vrlo moćan i efikasan način odabira HTML elemenata u dokumentu. Pogledajte lekciju CSS selektori da biste saznali više o njima. Ova metoda vraća popis svih elemenata koji se podudaraju s navedenim selektorima. Možete ga ispitati kao i bilo koji niz, kao što je prikazano u sljedećem primjeru: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Odaberite elemente pomoću CSS selektora</title>
</head>
<body>
    <ul>
        <li>Hljeb</li>
        <li class="tick">Kafa</li>
        <li>Kolač</li>
    </ul>
        
    <script>
    // Odabir svih li elemenata
    var matches = document.querySelectorAll("ul li");
     
    // Ispis broja odabranih li elemenata
    document.write("Broj odabranih elemenata: " + matches.length + "<hr>")
     
    // Ispis sadržaja izabranih li elemenata
    for(var elem of matches) {  
        document.write(elem.innerHTML + "<br>");
    }
     
    // Primjena crte kroz stil na prvi li element pomoću oznake klase
    matches = document.querySelectorAll("ul li.tick");
    matches[0].style.textDecoration = "line-through";
    </script>
</body>
</html>