Elementy JavaScript HTML DOM

W tym rozdziale omówimy, jak znajdować i dostępować do elementów HTML na stronie HTML.

Znajdowanie elementów HTML

Zwykle, za pomocą JavaScript, musisz operować na elementach HTML.

Aby osiągnąć ten cel, musisz najpierw znaleźć te elementy. Jest kilka sposobów, aby to zrobić:

  • Znajdowanie elementów HTML za pomocą id
  • Znajdowanie elementów HTML za pomocą nazwy tagu
  • Znajdowanie elementów za pomocą nazwy klasy
  • Znajdowanie HTML elementów za pomocą CSS selektora
  • Znajdowanie elementów HTML za pomocą kolekcji obiektów HTML

Znajdowanie elementów HTML za pomocą id

Najprostszym sposobem znalezienia elementu w DOM jest użycie id elementu.

W tym przykładzie znajduje się element o id="intro":

Przykład

var myElement = document.getElementById("intro");

Spróbuj sam

Jeśli element zostanie znaleziony, ta metoda zwróci obiekt elementu (w myElement).

Jeśli element nie zostanie znaleziony, myElement będzie zawierał null.

Znajdowanie elementów HTML za pomocą nazwy tagu

W tym przykładzie znajduje się wszystkie <p> Element:

Przykład

var x = document.getElementsByTagName("p");

Spróbuj sam

W tym przykładzie znajduje się element o id="main", a następnie znajduje wszystkie elementy <p> Element:

Przykład

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Spróbuj sam

Znajdowanie elementów za pomocą nazwy klasy

Jeśli potrzebujesz znaleźć wszystkie HTML elementy o tej samej nazwie klasy, użyj getElementsByClassName().

W tym przykładzie zwraca listę wszystkich elementów zawierających klasę "intro":

Przykład

var x = document.getElementsByClassName("intro");

Spróbuj sam

Znajdowanie elementów za pomocą nazwy klasy nie jest kompatybilne z Internet Explorer 8 i wcześniejszymi wersjami.

Znajdowanie HTML elementów za pomocą CSS selektora

Jeśli potrzebujesz znaleźć wszystkie HTML elementy pasujące do określonego CSS selektora (id, nazwa klasy, typ, atrybuty, wartości atrybutów itp.), użyj querySelectorAll() metody.

W tym przykładzie zwraca wszystkie elementy o klasie "intro" <p> Lista elementów:

Przykład

var x = document.querySelectorAll("p.intro");

Spróbuj sam

querySelectorAll() Nie jest kompatybilne z Internet Explorer 8 i wcześniejszymi wersjami.

Znajdowanie obiektów HTML za pomocą selektorów obiektów HTML

Ten przykład znajduje element formularza o id="frm1" w zbiorze forms, a następnie wyświetla wartości wszystkich elementów:

Przykład

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Spróbuj sam

Poniższe obiekty HTML (i ich zestawy) są również dostępne: