JavaScript HTML elementy DOM
Ta strona uczy, jak znaleźć i uzyskać dostęp do elementów HTML na stronie HTML.
Znajdowanie elementów HTML
Często za pomocą JavaScript chcesz manipulować elementami HTML.
Aby to zrobić, musisz najpierw znaleźć elementy. Można to zrobić na kilka sposobów:
- Znajdowanie elementów HTML według id
- Znajdowanie elementów HTML według nazwy tagu
- Znajdowanie elementów HTML według nazwy klasy
- Znajdowanie elementów HTML za pomocą selektorów CSS
- Znajdowanie elementów HTML według kolekcji obiektów HTML
Znajdowanie elementu HTML według identyfikatora
Najłatwiejszym sposobem znalezienia elementu HTML w DOM jest użycie identyfikatora elementu.
Ten przykład znajduje element z id="intro"
:
Przykład
const element = document.getElementById("intro");
Jeśli element zostanie znaleziony, metoda zwróci element jako obiekt (w elemencie).
Jeśli element nie zostanie znaleziony, element będzie zawierał null
.
Znajdowanie elementów HTML według nazwy tagu
W tym przykładzie znajdują się wszystkie <p>
elementy:
Przykład
const element = document.getElementsByTagName("p");
Ten przykład wyszukuje element z id="main"
, a następnie odnajduje wszystkie <p>
elementy wewnątrz "main"
:
Przykład
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Znajdowanie elementów HTML według nazwy klasy
Jeśli chcesz znaleźć wszystkie elementy HTML o tej samej nazwie klasy, użyj
getElementsByClassName()
.
Ten przykład zwraca listę wszystkich elementów z class="intro"
.
Przykład
const x = document.getElementsByClassName("intro");
Znajdowanie elementów HTML za pomocą selektorów CSS
Jeśli chcesz znaleźć wszystkie elementy HTML, które pasują do określonego selektora CSS (id, nazwy klas, typy, atrybuty, wartości atrybutów itp.), użyj querySelectorAll()
metody.
Ten przykład zwraca listę wszystkich <p>
elementów z class="intro"
.
Przykład
const x = document.querySelectorAll("p.intro");
Znajdowanie elementów HTML według kolekcji obiektów HTML
Ten przykład umożliwia znalezienie elementu formularza z id="frm1"
, w kolekcji formularzy i wyświetlenie wszystkich wartości elementów:
Przykład
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Dostępne są również następujące obiekty HTML (i kolekcje obiektów):