JavaScript & DOM - Get Set atributi

Rad sa atributima

Atributi su posebne riječi koje se koriste unutar početne oznake HTML elementa za kontrolu ponašanja oznake ili pružaju dodatne informacije o oznaci. JavaScript pruža nekoliko metoda za dodavanje, uklanjanje ili promjenu atributa HTML elementa. U nastavku ćemo detaljno naučiti ove metode.


Dobijanje vrijednosti atributa elementa

Metoda getAttribute() koristi se za dobijanje trenutne vrijednosti atributa na elementu. Ako navedeni atribut ne postoji na elementu, vratiće nulu. Pogledajmo primjer: 

<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Odabir elementa prema atributu ID
    var link = document.getElementById("myLink");
    
    // Dobijanje vrijednosti atributa
    var href = link.getAttribute("href");
    alert(href); // Ispisuje: https://www.google.com/
    
    var target = link.getAttribute("target");
    alert(target); // Ispisuje: _blank
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dobijanje vrijednosti atributa</title>
</head>
<body>
    <p><a href="https://www.google.com/" target="_blank" id="myLink">Google</a></p>

    <script>
        // Odabir elementa prema atributu ID-a
        var link = document.getElementById("myLink");
        
        // Dobijanje vrijednosti atributa
        var href = link.getAttribute("href");
        document.write(href); // Ispisuje: https://www.google.com/
        document.write("<br>");
        
        var target = link.getAttribute("target");
        document.write(target); // Ispisuje: _blank
    </script>
</body>
</html>

JavaScript nudi nekoliko različitih načina za odabir elemenata na stranici. Pogledajte lekciju o JavaScript DOM selektorima da biste saznali više o njima.


Postavljanje atributa na elemente

Metoda setAttribute() koristi se za postavljanje atributa na navedeni element. Ako atribut već postoji na elementu, vrijednost se ažurira, u suprotnom se dodaje novi atribut s navedenim imenom i vrijednošću. JavaScript kod u sljedećem primjeru dodaće klasu i onemogućeni atribut elementu <button> 

<button type="button" id="myBtn">Click Me</button>

<script>
    //Odabir elementa
    var btn = document.getElementById("myBtn");
  
    // Postavljanje novih atributa
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Postavljanje atribut na element</title>
</head>
<body>
    <button type="button" id="myBtn">Click Me</button>

    <script>
        // Odabir elementa
        var btn = document.getElementById("myBtn");
        
        // Postavljanje novih atributa
        btn.setAttribute("class", "click-btn");
        btn.setAttribute("disabled", "");
    </script>
</body>
</html>

Slično tome, metodu setAttribute() možete koristiti za ažuriranje ili promjenu vrijednosti postojećeg atributa na HTML elementu. JavaScript kod u sljedećem primjeru ažuriraće vrijednost postojećeg atributa href (<a>) elementa. 

<a href="#" id="myLink">IT TUTORIJALI</a>

<script>
    // Odabir elementa
    var link = document.getElementById("myLink");
  
    // Promjena vrijednosti atributa href
    link.setAttribute("href", "https://www.ittutorijali.net");
</script>

Uklanjanje atributa iz elemenata

Metoda removeAttribute() koristi se za uklanjanje atributa iz navedenog elementa. JavaScript kod u sljedećem primjeru ukloniće atribut href iz elementa. 

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Odabir elementa
    var link = document.getElementById("myLink");
  
    // Uklanjanje href atributa
    link.removeAttribute("href");
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklonite atribut iz elementa</title>
</head>
<body>
    <a href="https://www.google.com/" id="myLink">Google</a>

    <script>
        // Odabir elementa
        var link = document.getElementById("myLink");
        
        // Uklanjanje atributa href
        link.removeAttribute("href");
    </script>
</body>
</html>