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>