Neueste Web-Entwicklung Tutorials
 

JavaScript HTML-DOM-Elemente

❮ Zurück Weiter Kapitel ❯

Diese Seite zeigt Ihnen, wie zu finden und Elemente HTML-Zugriff in einer HTML-Seite.

Finding HTML-Elemente

Oft mit JavaScript, möchten Sie HTML-Elemente zu manipulieren.

Dazu müssen Sie zuerst die Elemente zu finden. Es gibt ein paar Möglichkeiten, dies zu tun:

  • Die Suche nach HTML - Elemente von id
  • Die Suche nach HTML-Elemente von Tag-Namen
  • Die Suche nach HTML - Elemente von class
  • Die Suche nach HTML-Elemente von CSS-Selektoren
  • Die Suche nach HTML-Elemente von HTML-Objektsammlungen

Die Suche nach HTML - Element von Id

Der einfachste Weg , ein HTML - Element im DOM zu finden ist , indem das Element unter Verwendung id .

In diesem Beispiel wird das Element mit id="intro" :

Beispiel

var myElement = document.getElementById("intro");
Versuch es selber "

Wenn das Element gefunden wird, kehrt das Verfahren das Element als ein Objekt (in myElement ).

Wenn das Element nicht gefunden wird, myElement wird null enthalten.

Die Suche nach HTML-Elemente von Tag Name

Dieses Beispiel findet alle <p> Elemente:

Beispiel

var x = document.getElementsByTagName("p");
Versuch es selber "

In diesem Beispiel wird das Element mit id="main" , und dann findet alle <p> Elemente innerhalb "main" :

Beispiel

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

Die Suche nach HTML - Elemente von Class - Name

Wenn Sie alle HTML - Elemente mit derselben finden wollen class verwenden getElementsByClassName() .

In diesem Beispiel wird eine Liste aller Elemente mit class="intro" .

Beispiel

var x = document.getElementsByClassName("intro");
Versuch es selber "

Die Suche nach Elementen von Klassennamen funktioniert nicht in Internet Explorer 8 und frühere Versionen.

Die Suche nach HTML-Elemente von CSS-Selektoren

Wenn Sie alle HTML - Elemente zu finden , die eine bestimmte CSS - Selektor entspricht ( id , Klassennamen Typen, Attribute, Werte von Attributen, etc.), die Verwendung querySelectorAll() Methode.

In diesem Beispiel wird eine Liste aller <p> Elemente mit class="intro" .

Beispiel

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

Die querySelectorAll() Methode funktioniert nicht in Internet Explorer 8 und frühere Versionen.

Die Suche nach HTML-Elemente von HTML-Objekten Sammlungen

In diesem Beispiel wird das Formularelement mit id="frm1" , in der Formularsammlung und zeigt alle Elementwerte:

Beispiel

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;
Versuch es selber "

Die folgenden HTML-Objekte (und Objektsammlungen) sind ebenfalls zugänglich:

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »


❮ Zurück Weiter Kapitel ❯