Najnowsze tutoriale tworzenie stron internetowych
 

JavaScript Elementy HTML DOM

❮ Poprzedni Następny Rozdział ❯

Strona ta uczy, jak znaleźć i elementy dostęp HTML na stronie HTML.

Znajdowanie elementów HTML

Często z JavaScript, chcesz manipulować elementów HTML.

Aby to zrobić, trzeba znaleźć elementy pierwsze. Istnieje kilka sposobów, aby to zrobić:

  • Znalezienie elementów HTML przez id
  • Znalezienie elementów HTML autorem nazwy znacznika
  • Znalezienie elementów HTML przez class nazwy
  • Znalezienie elementów HTML przez selektorów CSS
  • Znalezienie elementów HTML autorem zbiorów obiektów HTML

Znajdowanie elementu HTML przez Id

Najprostszym sposobem na znalezienie elementu HTML w DOM, jest za pomocą elementu id .

Przykład ten znajdzie element o id="intro" :

Przykład

var myElement = document.getElementById("intro");
Spróbuj sam "

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

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

Znalezienie elementów HTML przez tag

Przykład ten znajduje wszystkie <p> elementy:

Przykład

var x = document.getElementsByTagName("p");
Spróbuj sam "

Przykład ten znajdzie elementu z id="main" , a następnie wyszukuje wszystkie <p> elementy wewnątrz "main" :

Przykład

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Spróbuj sam "

Znalezienie elementów HTML przez Class Name

Jeśli chcesz znaleźć wszystkie elementy HTML z tej samej class nazwę, użyj getElementsByClassName() .

W tym przykładzie zwraca listę wszystkich elementów z class="intro" .

Przykład

var x = document.getElementsByClassName("intro");
Spróbuj sam "

Znalezienie elementy według nazwy klasy nie działa w programie Internet Explorer 8 i wcześniejszych wersjach.

Znalezienie elementów HTML przez selektorów CSS

Jeśli chcesz znaleźć wszystkie elementy HTML, który odpowiada określonej selektora CSS ( id , nazw klas, typów, atrybutów, wartości atrybutów, etc), użyj querySelectorAll() metody.

W tym przykładzie zwraca listę wszystkich <p> elementy z class="intro" .

Przykład

var x = document.querySelectorAll("p.intro");
Spróbuj sam "

querySelectorAll() metoda nie działa w programie Internet Explorer 8 i wcześniejszych wersjach.

Znalezienie elementów HTML by HTML Kolekcje obiektów

Przykład ten znajdzie element formularza z id="frm1" w kolekcji formy i wyświetla wszystkie wartości 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 "

Następujące obiekty HTML (obiekt) i kolekcje dostępne są również:

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »


❮ Poprzedni Następny Rozdział ❯