Pobieranie elementów struktury DOM

Z poziomu języka JavaScript możemy odwoływać się do poszczególnych elementów struktury hierarchicznej DOM dokumentu HTML i oprogramować je. Służą do tego cztery właściwości, opisane niżej.

getElementById

Metoda ta pozwala odnaleźć węzeł (element) w dokumencie HTML, któremu przypisano identyfikator id o danej nazwie. Element taki można w JavaScript oprogramować.

Przykład 1

Załóżmy, że mamy zdefiniowany akapit tekstu w następujący sposób w kodzie HTML strony.

<p id="akapit">To jest <strong>bardzo ważny</strong> tekst.</p>

Nasz akapit wygląda tak:

To jest bardzo ważny tekst.

W poniższym skrypcie znajdujemy powyższy element po id i we właściwości style przypisujemy mu czerwony kolor.

<script>
 var x=document.getElementById("akapit");
 x.style.color = 'red'; 
</script>

getElementsByTagName

Metoda ta pozwala odwołać się do elementów strony internetowej po nazwie znacznika tag. Metoda zwraca tablicę wszystkich węzłów w dokumencie zawierających w swojej nazwie dany znacznik. W kodzie odwołujemy się zatem do poszczególnych elementów tablicy.

Przykład 2 - metoda getElementsByTagName

W dokumencie HTML zdefiniujemy sobie tablicę.

Fragment kodu html dokumentu ze zdefiniowana tablicą

<table cellspacing="5" cellpadding="5">
 <tr><td>A</td><td>B</td><td>C</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>u</td><td>f</td><td>o</td></tr>
 <tr><td>9</td><td>8</td><td>7</td></tr>
 <tr><td>k</td><td>o</td><td>t</td></tr>
</table>

Poniższy przykład pozwala pokolorować co drugi wiersz tabeli. Jak to działa? Szukamy wszystkich elementów (tagów) <tr> w dokumencie HTML (getElementsByTagName('tr');) i przypisujemy je do zmiennej td. Następnie w pętli każdej parzystej pozycji z listy zmiennej td przypisujemy zielony kolor jako kolor tła.

<script>
 document.addEventListener("DOMContentLoaded", function() {
 var td = document.getElementsByTagName('tr');
 for (var x=0; x<td.length; x++) {
  if ((x+1)%2==0) {td[x].style.backgroundColor = 'green'};
 }
});
</script>

querySelector i querySelectorAll

Współczesne przeglądarki umożliwiają wyszukiwanie węzłów (elementów) po wyrażeniu CSS. Pierwsza metoda zwraca tylko pierwszy z pasujących elementów, natomiast druga zwraca tablicę wszystkich dopasowanych elementów. Metody te są rozbudowane i będą szczegółowo osobno omawiane. Tutaj posłużymy się tylko jednym przykładem.

Przykład 3 - wykorzystanie querySelectorAll

W niniejszym przykładzie pokolorujemy wszystkie nagłówki <h3>, dla których przypisano klasę "naglowek-1". Efekt zobaczysz od razu na tej stronie.

<script>
var x = document.querySelectorAll('.naglowek-1');
for (var i=0; i<x.length; i++) {
  x[i].style.backgroundColor = 'yellow';
}
</script>

Inne zagadnienia z tej lekcji

Document Object Model - DOM

Opis hierarchii dokumentu HTML. Oprócz tego, że przeglądarka wczytuje i wyświetla zawartość dokumentu HTML z użyciem arkuszy stylów CSS, dodatkowo zapamiętuje MODEL danego dokutemu.

Relacje między elementami DOM

Opis relacji miedzy węzłami w strukturze DOM w Javascript. Zobaczymy jakie zachodzą relacje miedzy tymi elementami. Artykuł zawiera listę właściwości węzłów i przykłady ich stosowania.

Tworzenie i usuwanie elementów

Opis metod tworzenia i usuwania węzłów w dokumencie HTML przy użyciu JavaScript. W tym artykule pokazuję, jak stworzyć, usunąć albo podmienić element strony internetowej.

Modyfikowanie elementów

Opis metod modyfikowania elementów strony przy użyciu JavaScript. W tym artykule pokazuję kilka metod modyfikacji elementów strony internetowej z poziomu skryptu.