JavaScript/Objekte/HTML-Elementobjekte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der HTML-Variante des Document Object Models (DOM) zufolge stellt jedes HTML-Element in einer HTML-Datei ein Objekt dar. Wichtig ist dabei zu wissen, wie mit einer Script-Sprache wie JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann.

Inhaltsverzeichnis

[Bearbeiten] Zugriff über Elementnamen sowie Elementnummer oder name-Attribut (ältere Elementlisten)

Nach Möglichkeit sollten Sie die vordefinierten Arrays verwenden, die alle Elemente des Dokuments eines Typs beinhalten. Diese wurden bereits in JavaScript 1.0 bzw. 1.1 definiert und wurden in die HTML-Variante des DOM übernommen. Sie erlauben den Zugriff über die Elementnummer (z.B. das dritte img-Element im Dokument) oder über ein name-Attribut (z.B. ein form-Element mit name="suchformular"). Damit gelingt der Zugriff auf HTML-Elemente am sichersten, aber es können nicht alle Elemente auf diese Weise angesprochen werden.

Gemäß der HTML-Variante des DOM können auf diese Weise auch Elemente mit einer bestimmten ID angesprochen werden. document.images["bild"] soll z.B. das img-Element ansprechen, das entweder das Attribut name="bild" oder das Attribut id="bild" besitzt. Im Vergleich zur vielseitigeren Methode document.getElementById() hat diese Schreibweise jedoch keine Vorteile, da sie ebenfalls nur von neueren Browsern unterstützt wird.

[Bearbeiten] Zugriff über das name-Attribut (getElementsByName)

Das name-Attribut ist in HTML nur bei bestimmten Elementen erlaubt, etwa bei Formularelementen. Deshalb ist diese Zugriffsmethode auch nur bei den folgenden Elementen möglich:

Mit der Methode document.getElementsByName() können Sie HTML-Elemente ansprechen, die ein name-Attribut haben.

[Bearbeiten] Zugriff über id-Attribut (getElementById)

Das id-Attribut ist im Gegensatz zum name-Attribut in allen HTML-Elementen erlaubt. Außerdem sollte seine Wertzuweisung ein dokumentweit eindeutiger Name für das Element sein. Dadurch eignet sich diese Zugriffsmethode in den meisten Fällen in der Praxis besser als die über das name-Attribut.

Mit der Methode document.getElementById() können Sie HTML-Elemente ansprechen, die ein id-Attribut haben. Zugriff über Elementnamen sowie Elementnummer, name-Attribut oder id-Attribut (getElementsByTagName):

Wenn Sie auf HTML-Elemente zugreifen möchten, bei denen weder ein name-Attribut noch ein id-Attribut notiert ist, steht Ihnen ein dritter Weg offen: der Zugriff über den Elementenbaum. Dabei können Sie dann beispielsweise auf die "dritte Tabellenzelle in der zweiten Tabellenreihe der vierten Tabelle im Dokument" zugreifen.

Mit der Methode document.getElementsByTagName() sind solche Zugriffe möglich.

[Bearbeiten] Eigenschaften und Methoden von HTML-Elementobjekten

Jedes HTML-Element hat Eigenschaften. Und zwar stellt jedes erlaubte Attribut eines HTML-Elements eine DOM-Eigenschaft dieses Elements dar. So hat beispielsweise das HTML-Element input ein erlaubtes Attribut value, ein anderes hat ein erlaubtes Attribut type="text". Im DOM gibt es demnach also ein input-Elementobjekt mit der Eigenschaft value, und ein input-Elementobjekt mit der Eigenschaft type.

Darüber hinaus definiert das DOM für einige der HTML-Elemente auch Methoden. So gibt es für das form-Elementobjekt (also das DOM-Objekt des HTML-Elements form) die Methoden submit() (Formular absenden) und reset() (Formulareingaben verwerfen).

Beachten Sie, dass Sie unbedingt die Groß-/Kleinschreibung der Eigenschaften und Methoden einhalten, die in diesem Abschnitt zu den einzelnen HTML-Elementobjekten aufgelistet sind. Fehler bei der Groß-/Kleinschreibung führen zu Fehlern in JavaScript.


Universaleigenschaften

Eigenschaft Status Bedeutung
className Jswrite.gif CSS-Klassenname
dir Jswrite.gif Schreibrichtung
id Jswrite.gif dokumentweit eindeutiger Name
lang Jswrite.gif Landessprache (de, en, fr, it usw.)
title Jswrite.gif Titel
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke