Pobieranie elementów za pomocą nazwy, tagu w JavaScript

Plik html

<!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 name="title_main">Main title</div>
    <div name="img_title">Image title</div>
    <p class="intro">This is an intro</p>
    
    <div class="block1">
        <div name="subtitle">Subtitle in block1</div>
        <p>Main description in block1</p>
        <p>Main description in block1</p>
        <p>Main description in block1</p>
    </div>

    <div class="block">
        <div name="subtitle">Subtitle in block</div>
        <p>Main description in block1</p>
        <p>Main description in block1</p>
        <p>Main description in block1</p>
    </div>

    <div class="block">
        <div name="subtitle">Subtitle in block</div>
        <p >Main description in block2</p>
        <p >Main description in block2</p>
    </div>
    
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

Pobieranie elementów na podstawie nazwy – getElementsByName()

// zmiana koloru wszystkich elementow o nazwie subtitle
let subtitles = document.getElementsByName("subtitle");
for(let i=0;i<subtitles.length;i++){
    subtitles[i].style.color="red";
}

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

Pobiera podane znaczniki html, np: div, p.

// zmiana koloru wszystkich paragrafów
let paragrafs = document.getElementsByTagName("p");
for(let i=0; i<paragrafs.length;i++){
    paragrafs[i].style.color = "#ccc";
}

Przykład precyzyjniejszego wyboru znacznika html wewnątrz Id

// zmiana koloru pierwszego paragrafu wewnątrz elementu o id block1
let paragrafInDiv = document.getElementById("block1").getElementsByTagName("p")[0];
paragrafInDiv.style.color = "blue";

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

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

Wybór paragrafów wewnątrz elementów o danej klasie

// zmiana koloru paragrafów wewnątrz elementów o klasie block
let divs = document.getElementsByClassName("block");
for(let i=0;i<divs.length;i++){
    let p = divs[i].getElementsByTagName("p");
    for(let j=0; j<p.length;j++){
        p[j].style.color = "red";
    }
}

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