Pobieranie elementów na podstawie klasy w JavaScript

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>
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top