HTML5-Handbuch - die neuen Features von HTML5

konzipiert ist, sondern auch für Script-Sprachen, die jegliche XML-basierte Auszeichnungssprache erweitern sollen. Das DOM orientiert sich daher in seinem Kern nicht an bestimmten HTML-Elementen. Stattdessen geht es in abstrakter Weise von einem »Dokument« aus (das in XHTML geschrieben sein kann, aber auch in einer anderen XML-basierten Sprache). Es definiert, wie auf die einzelnen Elemente dieses Dokuments zugegriffen wird und welche Manipulationsmöglichkeiten es gibt. Da man aber bei der Entwicklung des DOM auch auf die Gegebenheiten und die Verbreitung von HTML und JavaScript Rücksicht nehmen wollte, wurde dem sogenannten »Kern-DOM« ein »HTML-Anwendungs-DOM« zur Seite gestellt. Letzteres versucht, Teile des gewachsenen JavaScript und MS-JScript zu sanktionieren und Bestandteile des »Kern-DOM« darin zu integrieren.
    DOM 1.0 grenzt noch zahlreiche erweiterte Aspekte aus, wie etwa das Event-Handling (Behandlung von Anwenderereignissen wie Mausklicks, Tastatureingaben usw.) oder die Integration von Stylesheets in das, was Programmierer dynamisch verändern können. In den Versionen 2.0 und 3.0 werden vom Document Object Model auch diese Aspekte behandelt.
DOM-Versionen und Dokumente :
    DOM Level 1 (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/REC-DOM-Level-1/
    DOM Level 2 Core (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/DOM-Level-2-Core
 
DOM Level 2 Views (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/DOM-Level-2-Views
    DOM Level 2 Events (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/DOM-Level-2-Events
 
DOM Level 2 Style (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/DOM-Level-2-Style
    DOM Level 2 Traversal and Range (W3C-Empfehlung, 2000)
    http://www.w3.org/TR/DOM-Level-2-Traversal-Range
 
DOM Level 2 HTML (W3C-Empfehlung, 2003)
    http://www.w3.org/TR/DOM-Level-2-HTML
    DOM Level 3 Core (W3C-Empfehlung, 2004)
    http://www.w3.org/TR/DOM-Level-3-Core
    DOM Level 3 Load and Save (W3C-Empfehlung, 2004)
    http://www.w3.org/TR/DOM-Level-3-LS
 
DOM Level 3 Requirements (W3C-Working-Group-Notiz, 2004)
    http://www.w3.org/TR/DOM-Requirements
    DOM Level 3 Views and Formatting (W3C-Working-Group-Notiz, 2004)
    http://www.w3.org/TR/DOM-Level-3-Views
 
DOM Level 3 Events (W3C-Working-Group-Notiz, 2003)
    http://www.w3.org/TR/DOM-Level-3-Events
    DOM Level 3 Abstract Schemas (W3C-Working-Group-Notiz, 2002)
    http://www.w3.org/TR/DOM-Level-3-AS
10.5      JavaScript: Unobtrusive Programming
    Schon seit längerer Zeit können Browser Event-Handler durch Script-Anweisungen einbinden. In der Anfangszeit war es üblich – und ist aus Gründen des besseren Verständnisses auch in diesem Buch so dargestellt –, dass JavaScript inline eingebunden wurde. Eben über die entsprechenden Event-Handler beim HTML-Element direkt.
    Dies entspricht aber nicht der Vorgabe, Inhalt, Stil und Verhalten in einem Dokument strikt voneinander zu trennen. Erst die externe Bindung macht die Auszeichnung sauber, flexibel und portabel.
    Durch die Attribute
id
,
name
bzw.
class
lässt sich jedes HTML-Element mit den Methoden des DOM ansprechen und mit JavaScript manipulieren. Beispielsweise können alle Hyperlinks einer Seite in einem Array gespeichert werden.
    var aTags = document.getElementsByTagName("a");
10.5.1    Elemente mit speziellen Eigenschaften ermitteln
    Mit der Methode
test()
können auch verschiedene spezielle Elemente des Arrays gefiltert werden. Diese Methode erwartet am Anfang einen regulären Ausdruck und prüft diesen gegen einen übergebenen String,
Beispiel
    var aTags = document.getElementsByTagName("a");
    var aTagsClass = new Array();
    for (var i = 0; i < aTags.length; i++) {
    if (/external/.test(aTags[i].className)) {
    aTagsClass[] = aTags[i];
    }
    }
Erläuterung
    Im vorhergehenden Beispiel werden alle
a
-Elemente einer Seite in einem Array
aTags
gespeichert. Danach wird ein leeres Array angelegt, um die zu suchenden Elemente speichern zu können. Nun wird mit einer
for
-Schleife das Array
aTags
durchgegangen. Sobald ein Element das Attribut
class="external"
besitzt, wird es als Element dem Array
aTagsClass
hinzugefügt.
Referenzinformationen
    JavaScript-Referenz
test()
:

10.5.2    Event-Handler im Skript anmelden
    Bis jetzt wurden die Event-Handler direkt im HTML-Markup notiert, wie in diesem Beispiel zu sehen:
    
    Durch die Technik des unaufdringlichen Programmierens werden die Handler nun direkt im Kopfbereich einer Webseite notiert.