logo

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>
Lupa


 

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>
Otwórz Pobierz


 

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>
Lupa




© medianauka.pl, 2016-11-01, ART-3274


Inne zagadnienia z tej lekcji

Document Object Model - DOMDocument 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 DOMRelacje 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ówTworzenie 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ówModyfikowanie 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.







Polecamy w naszym sklepie

Kolorowe skarpetki Miasto
kolorowe skarpetki góra lodowa
Matematyka konkretna
Kolorowe skarpetki urodzinowe
Mapa świata Puzzle
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2021 r.