Pobieranie elementów na podstawie klasy w JavaScript

JavaScript, webdev

Dzięki językowi JS możemy manipulować elementami html i stylami css. Aby się do nich odnieść możemy skorzystać z kilku wbudowanych metod w zależności od tego czy chcemy odnieść się na podstawie znacznika, nazwy, klasy czy id.
Dane elementy, na podstawie ich klasy, możemy pobrać za pomocą dwóch metod: getElementsByClassName() i querySelectorAll()

Pobieranie elementów na podstawie klasy – getElementsByClassName()

Tę samą klasę może mieć wiele elementów, dlatego też tutaj pobierana jest tablica elementów. Z tego powodu należy metodę getElementsByClassName() przypisać do zmiennej. Jeśli chcemy odnieść się do jednego z pobranych elementów o danej klasie skorzystamy z numeru indeksu, a jeżeli chcemy przeprowadzić operację na wszystkich elementach, najlepiej jest skorzystać z pętli for.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="item">Tytul 1</div>
    <div class="item">Tytul 2</div>
    <div class="item">Tytul 3</div>
    <div class="item">Tytul 4</div>
    <div class="item item2">Tytul 2</div>
    <div class="item2">Tytul 3</div>
    <div class="item3">Tytul 4</div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

getElementsByClassName()

let items = document.getElementsByClassName('item'); //Pobiera elementy o klasie item
let items = document.getElementsByClassName('item item2'); //Pobiera elementy, które mają zarówno klasę item jak i item2

for(let i=0; i<items.length;i++){
    items[i].textContent = "Changed with js";
}

querySelectorAll()

let items = document.querySelectorAll('.item'); //Pobiera elementy o klasie item
let items = document.querySelectorAll('.item, .item2'); //Pobiera elementy o klasie item lub klasie item2
for(let i=0; i<items.length;i++){
    items[i].textContent = "Changed with js";
}

Pobieranie elementów na podstawie nazwy – getElementsByName()

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
    function init(){
        var panels = document.getElementsByName("panel_nazwa");
        for(var i=0; i < panels.length; i++){
            panels[i].textContent = "Po zmianie na podstawie nazwy";
        }
    }
</script>
<body>
    <div class="panel" id="panel" name="panel_nazwa">To jest div 1</div>
    <div class="panel" name="panel_nazwa">To jest div 2</div>
    <button onclick="init()">Click me</button>
</body>
</html>

Pobieranie elementów na podstawie nazwy tagu – getElementsByTagName()

Pobiera podane znaczniki html, np: div, p.

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
    function init(){
        var panels = document.getElementsByTagName("div");
        for(var i=0; i < panels.length; i++){
            panels[i].textContent = "Po zmianie na podstawie nazwy";
        }
    }
</script>
<body>
    <div class="panel" id="panel" name="panel_nazwa">To jest div 1</div>
    <div class="panel" name="panel_nazwa">To jest div 2</div>
    <p class="panel" name="panel_nazwa">To jest paragraf</p>
    <button onclick="init()">Click me</button>
</body>
</html>

Przykład precyzyjniejszego wyboru znacznika html wewnątrz Id 

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
    function init(){
        document.getElementById("panel").getElementsByTagName("p")[0].textContent = "paragraf wewnatrz elementu o klasie panel";
    }
</script>
<body>
    
    <div class="panel" id="panel" name="panel_nazwa">
        <p class="panel" name="panel_nazwa">To jest paragraf wewnatrz div</p>
    </div>
    <div class="panel" name="panel_nazwa">To jest div</div>
    <p class="panel" name="panel_nazwa">To jest paragraf</p>

    <button onclick="init()">Click me</button>
</body>
</html>

Powyższy przykład możemy też otrzymać za pomoca metody querySelectorAll(), np:

    function init(){
        document.getElementById("panel").querySelectorAll("p")[0].textContent = "paragraf wewnatrz elementu o klasie panel";
    }

Wybór paragrafu o klasie parag wewnątrz obiektu o id panel

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
    function init(){
        document.getElementById("panel").querySelectorAll("p.parag")[0].textContent = "paragraf z klasa wewnatrz elementu o klasie panel";
    }
</script>
<body>
    
    <div class="panel" id="panel" name="panel_nazwa">
        <p class="parag" name="panel_nazwa">To jest paragraf o klasie parag wewnatrz div</p>
        <p>To jest zwykły paragraf wewnatrz div</p>
    </div>

    <button onclick="init()">Click me</button>
</body>
</html>

Wybór różnych znaczników wewnątrz id

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
    function init(){
        var elements = document.getElementById("panel").querySelectorAll("p,span,h3");
        for (var i=0; i<elements.length; i++){
            elements[i].textContent = "p,span,h3 wewnatrz id panel ";
        }
    }
</script>
<body>
    
    <div class="panel" id="panel" name="panel_nazwa">
        <p class="parag" name="panel_nazwa">To jest paragraf o klasie parag wewnatrz div</p>
        <p>To jest zwykły paragraf wewnatrz div</p>
        <span>To jest spanisko</span>
        <h3>To jest naglowek h3</h3>
        <div>To jest divisko</div>
    </div>

    <button onclick="init()">Click me</button>
</body>
</html>
Scroll to Top