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

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>
Scroll to Top