Wie bei externen HTML-Dateien ist die Organisation des Markups unabhängig von seinem Stil, Format und Verhalten. Während Sie mit JavaScript sicherlich den Stil von Elementen oder Text ändern können, ist es interessanter, tatsächlich die Organisation des Layouts Ihres Markups zu ändern.
Denken Sie daran, dass Ihr Markup lediglich Organisation und einen Rahmen bietet, und Sie sind auf dem Weg zum Erfolg. Gehen Sie einen kleinen Schritt weiter und Sie werden sehen, wie der Browser die gesamte Textorganisation in etwas äußerst Interessantes umwandelt, eine Reihe von Objekten, von denen jedes geändert, hinzugefügt oder entfernt werden kann.
Vorteile von Text-Markup
Bevor wir über Webbrowser sprechen, lohnt es sich zu überlegen, warum einfacher Text die absolut beste Wahl zum Speichern von HTML ist (weitere Informationen finden Sie in einigen anderen Ideen zu Markup). Unabhängig von den Vor- und Nachteilen sei daran erinnert, dass jedes Mal, wenn eine Seite angezeigt wird, HTML über das Netzwerk an den Webbrowser gesendet wird (der Kürze halber werden Caches usw. nicht berücksichtigt). Es gibt wirklich keinen effizienteren Weg, Text zu übermitteln. Binäre Objekte, grafische Darstellungen von Seiten, neu organisierte Markup-Blöcke usw., die allesamt schwieriger über das Netzwerk zu übertragen sind als reine Textdateien.
Darüber hinaus trägt auch der Browser zur Herrlichkeit bei. Heutige Browser ermöglichen es Benutzern, die Textgröße zu ändern, Bilder zu skalieren, das CSS oder JavaScript der Seite (in den meisten Fällen) herunterzuladen und vieles mehr, was das Senden jeglicher grafischer Darstellung der Seite an den Browser völlig ausschließt. Allerdings benötigt der Browser das Roh-HTML, damit er beliebige Verarbeitungen auf die Seite im Browser anwenden kann, anstatt dem Browser zu vertrauen, dass er diese Aufgabe erledigt. Ebenso erfordert die Trennung von CSS von JavaScript und CSS von HTML-Markup ein Format, das leicht getrennt werden kann. Auch hier sind Textdateien die beste Methode für diese Aufgabe.
Denken Sie nicht zuletzt daran, dass neue Standards (wie HTML 4.01 und XHTML 1.0 und 1.1) versprechen, den Inhalt (die Daten auf der Seite) von der Präsentation und dem Stil (normalerweise durch CSS angewendet) zu trennen. Wenn Programmierer HTML von CSS trennen und den Browser dann zwingen würden, eine Darstellung der Seite abzurufen, die die verschiedenen Teile der Seite zusammenhält, würden sie die meisten Vorteile dieser Standards verlieren. Die Trennung dieser Teile beim Eintreffen im Browser verleiht dem Browser eine beispiellose Flexibilität beim Abrufen von HTML vom Server.
Zusätzliche Gedanken zur
Bearbeitung von Markup-Nurtext: Richtig oder falsch?
Einfacher Text eignet sich ideal zum Speichern von Markups, ist jedoch nicht zum Bearbeiten von Markups geeignet. Beliebt ist die Verwendung von IDEs wie Macromedia DreamWeaver oder dem leistungsstärkeren Microsoft® FrontPage®, um das Markup von Webseiten zu manipulieren. Diese Umgebungen bieten häufig Verknüpfungen und Hilfe zum Erstellen von Webseiten, insbesondere bei Verwendung von CSS und JavaScript, die beide aus anderen Dateien als dem eigentlichen Seiten-Markup stammen. Es spielt keine Rolle, dass viele Leute immer noch den guten alten Notepad oder vi bevorzugen (ich gebe zu, dass ich einer von ihnen bin). In jedem Fall ist das Endergebnis eine Textdatei voller Markup.
Text im Web: Das Gute
wurde gesagt: Text ist das beste Medium für Dokumente wie HTML oder CSS, die tausende Male über das Web übertragen werden. Wenn ich sage, dass es für einen Browser schwierig ist, Text darzustellen, meine ich speziell die Umwandlung von Text in eine visuelle grafische Seite, die der Benutzer sehen kann. Dies hat nichts damit zu tun, wie der Browser die Seite tatsächlich vom Webbrowser abruft. In diesem Fall ist Text immer noch die beste Wahl.
Nachteile von Text-Markup
So wie Text-Markup überraschende Vorteile für Designer und Seitenersteller bietet, hat es auch ziemlich überraschende Nachteile für Browser. Insbesondere ist es für Browser schwierig, dem Benutzer Text-Markup direkt visuell darzustellen (Einzelheiten finden Sie in einigen anderen Ideen zu Markup). Berücksichtigen Sie die folgenden allgemeinen Browseraufgaben:
·Wenden Sie CSS-Stile (normalerweise aus mehreren Stylesheets in externen Dateien) auf das Markup an, basierend auf dem Elementtyp, der Klasse, der ID und seiner Position im HTML-Dokument.
·Wenden Sie Stile und Formatierungen auf verschiedene Teile des HTML-Dokuments an, basierend auf JavaScript-Code (normalerweise in einer externen Datei).
·Ändern Sie Formularfeldwerte basierend auf JavaScript-Code.
·Basiert auf JavaScript-Code und unterstützt visuelle Effekte wie das Umdrehen und Austauschen von Bildern.
Die Komplexität liegt nicht darin, diese Aufgaben zu programmieren; alles darin ist ziemlich einfach. Die Komplexität ergibt sich daraus, dass der Browser die angeforderte Aktion tatsächlich ausführt. Wenn das Markup als Text gespeichert wird, wenn Sie beispielsweise Text (text-align: center) in das p-Element der Center-Text-Klasse eingeben möchten, wie erreichen Sie dies?
·Inline-Stile zum Text hinzufügen?
·Wenden Sie Stile auf HTML-Text im Browser an und halten Sie den Inhalt einfach zentriert oder nicht?
·Unformatiertes HTML anwenden und anschließend die Formatierung anwenden?
Diese sehr schwierigen Probleme sind der Grund, warum heutzutage so wenige Menschen Browser schreiben. (Wer auch immer den Browser geschrieben hat, sollte meinen aufrichtigen Dank annehmen.)
Es besteht kein Zweifel daran, dass reiner Text keine gute Möglichkeit ist, den HTML-Code des Browsers zu speichern, obwohl Text die beste Lösung ist, um das Seiten-Markup zu erhalten. Fügen Sie die Fähigkeit von JavaScript hinzu, die Struktur der Seite zu ändern, und die Dinge werden etwas nuancierter. Sollte der Browser die geänderte Struktur auf die Festplatte umschreiben? Wie können Sie die neueste Version des Dokuments behalten?
Natürlich ist Text nicht die Antwort. Es ist schwer zu ändern, es ist schwierig, Stile und Verhaltensweisen darauf anzuwenden, und es ist grundsätzlich weit von der Dynamik heutiger Webseiten entfernt.
Die Antwort auf das Problem, auf Baumansichten zurückzugreifen
(zumindest die von heutigen Webbrowsern gewählte Antwort), besteht darin, eine Baumstruktur zur Darstellung von HTML zu verwenden. Siehe Listing 1, eine ziemlich einfache und langweilige HTML-Seite, die das Markup für diesen Artikel darstellt.
Listing 1. Einfache HTML-Seite<html>
im Text-Markup
<Kopf>
<title>Bäume, Bäume, überall</title>
</head>
<Körper>
<h1>Bäume, Bäume, überall</h1>
<p>Willkommen auf einer <em>wirklich</em> langweiligen Seite.</p>
<div>
Kommen Sie bald wieder.
<img src="come-again.gif" />
</div>
</body>
</html>
Der Browser akzeptiert die Seite und wandelt sie in eine Baumstruktur um, wie in Abbildung 1 dargestellt.
Um diesen Artikel am Laufen zu halten, habe ich ihn etwas vereinfacht. Experten für DOM oder XML wissen, welchen Einfluss Leerzeichen auf die Art und Weise haben, wie der Text eines Dokuments in der Baumstruktur eines Webbrowsers dargestellt und aufgeschlüsselt wird. Ein oberflächliches Verständnis macht die Dinge nur mehrdeutig. Wenn Sie also die Auswirkungen von Leerzeichen herausfinden möchten, ist dies die beste Wahl. Wenn nicht, lesen Sie einfach weiter und denken Sie nicht darüber nach. Wenn es zu einem Problem wird, wissen Sie alles, was Sie brauchen.
Abgesehen vom eigentlichen Baumhintergrund fällt Ihnen vielleicht als Erstes auf, dass alles im Baum mit dem äußersten HTML-enthaltenden Element, dem HTML-Element, beginnt. In Anlehnung an die Metapher eines Baumes wird dies als Wurzelelement bezeichnet. Obwohl dies also die unterste Ebene des Baums ist, beginne ich normalerweise damit, wenn man den Baum betrachtet und analysiert. Wenn es funktioniert, könnten Sie den ganzen Baum auf den Kopf stellen, aber das dehnt die Baummetapher etwas aus.
Die von der Wurzel ausgehenden Linien stellen die Beziehung zwischen den verschiedenen beschrifteten Teilen dar. Die Elemente head und body sind untergeordnete Elemente des HTML-Wurzelelements; title ist ein untergeordnetes Element von head und der Text „Bäume, Bäume, überall“ ist ein untergeordnetes Element von title. Der gesamte Baum wird auf diese Weise organisiert, bis der Browser eine Struktur ähnlich der Abbildung 1 erhält.
Einige zusätzliche Terminologie
Um der Baummetapher zu folgen, werden Kopf und Körper als HTML-Zweige bezeichnet. Sie werden Zweige genannt, weil sie eigene Kinder haben. Wenn Sie das Ende des Baums erreichen, gelangen Sie zum Haupttext, z. B. „Bäume, Bäume, überall“ und „wirklich“; diese werden oft Blätter genannt, weil sie keine eigenen untergeordneten Elemente haben. Sie müssen sich nicht alle diese Begriffe merken. Es ist viel einfacher, sich die Baumstruktur einfach vorzustellen, wenn Sie herausfinden möchten, was ein bestimmter Begriff bedeutet.
Objektwerte
Nachdem Sie nun einige grundlegende Begriffe verstanden haben, ist es an der Zeit, sich auf das kleine Rechteck zu konzentrieren, das den Elementnamen und den Text enthält (Abbildung 1). Jedes Rechteck ist ein Objekt; der Browser löst einige darin enthaltene Textprobleme. Durch die Verwendung von Objekten zur Darstellung jedes Teils eines HTML-Dokuments können Sie die Organisation einfach ändern, Stile anwenden, JavaScript den Zugriff auf das Dokument ermöglichen und vieles mehr.
Objekttypen und Eigenschaftsmarkierungen
Jeder mögliche Typ hat seinen eigenen Objekttyp. Beispielsweise werden Elemente in HTML durch den Objekttyp Element dargestellt. Der Text im Dokument wird durch den Typ „Text“ dargestellt, die Attribute werden durch den Typ „Attribut“ usw. dargestellt.
Webbrowser können also nicht nur ein Objektmodell zur Darstellung von Dokumenten verwenden (und so den Umgang mit statischem Text vermeiden), sondern sie können auch Objekttypen verwenden, um sofort zu erkennen, was etwas ist. Das HTML-Dokument wird analysiert und in eine Sammlung von Objekten konvertiert, wie in Abbildung 1 dargestellt, und Dinge wie spitze Klammern und Escape-Sequenzen (z. B. verwenden Sie < für < und > für >) sind kein Problem mehr. Dies erleichtert die Arbeit des Browsers (zumindest nach dem Parsen des eingegebenen HTML-Codes) erheblich. Es ist leicht herauszufinden, ob es sich bei etwas um ein Element oder ein Attribut handelt, und zu bestimmen, wie mit Objekten dieses Typs umgegangen wird.
Durch die Verwendung von Objekten kann ein Webbrowser die Eigenschaften dieser Objekte ändern. Beispielsweise verfügt jedes Elementobjekt über ein übergeordnetes Element und eine Liste untergeordneter Elemente. Durch das Hinzufügen eines neuen untergeordneten Elements oder Textes wird einfach ein neues untergeordnetes Element zur Liste der untergeordneten Elemente des Elements hinzugefügt. Diese Objekte verfügen auch über eine Stileigenschaft, sodass das schnelle Ändern des Stils eines Elements oder Textsegments sehr einfach ist. Um beispielsweise mit JavaScript die Höhe eines Div zu ändern, sehen Sie folgendermaßen aus:
someDiv.style.height = "300px";
Mit anderen Worten: Ein Webbrowser macht es sehr einfach, das Erscheinungsbild und die Struktur eines Baums mithilfe von Objekten zu ändern Eigenschaften. Vergleichen Sie dies mit den komplizierten Dingen, die ein Browser intern tun muss, um eine Seite als Text darzustellen. Bei jeder Änderung einer Eigenschaft oder Struktur muss der Browser die statische Datei neu schreiben, erneut analysieren und erneut auf dem Bildschirm anzeigen. Mit Objekten ist das alles gelöst.
Nehmen Sie sich nun einen Moment Zeit, um einige HTML-Dokumente zu erweitern und sie mit einer Baumstruktur zu umreißen. Obwohl dies wie eine ungewöhnliche Anfrage erscheinen mag (insbesondere in einem Artikel wie diesem, der so wenig Code enthält), müssen Sie mit ihrer Struktur vertraut sein, wenn Sie hoffen, diese Bäume manipulieren zu können.
Unterwegs entdecken Sie vielleicht einige seltsame Dinge. Betrachten Sie beispielsweise Folgendes:
Was passiert mit dem Attribut?
·Was ist mit Text, der in Elemente unterteilt ist (z. B. em und b)?
·Was ist mit HTML, das nicht richtig strukturiert ist (z. B. wenn das schließende p-Tag fehlt)?
Wenn Sie mit diesen Themen vertraut sind, können Sie die folgenden Abschnitte besser verstehen.
Strenge ist manchmal eine gute Sache.
Wenn Sie die gerade erwähnte Übung ausprobieren, werden Sie möglicherweise einige potenzielle Probleme mit der markierten Baumansicht feststellen (wenn nicht, vertrauen Sie mir einfach!). Tatsächlich sind einige Probleme in Listing 1 und Abbildung 1 zu finden. Schauen Sie sich zunächst an, wie das p-Element zerlegt wird. Wenn Sie den durchschnittlichen Webentwickler fragen: „Was ist der Textinhalt des p-Elements?“ lautet die häufigste Antwort: „Willkommen auf einer wirklich langweiligen Webseite.“ Wenn Sie dies mit Abbildung 1 vergleichen, werden Sie feststellen, dass diese Antwort (obwohl logisch) einfach nicht korrekt ist.
Tatsächlich verfügt das p-Element über drei verschiedene untergeordnete Objekte, von denen keines den vollständigen Text „Willkommen auf einer wirklich langweiligen Webseite“ enthält. Sie finden Teile des Textes wie „Willkommen auf einer“ und „langweilige Webseite“, aber nicht den gesamten Text. Um dies zu verstehen, denken Sie daran, dass alles im Markup in ein Objekt irgendeines Typs konvertiert werden muss.
Auch die Reihenfolge spielt keine Rolle! Können Sie sich vorstellen, wie ein Benutzer auf einen Webbrowser reagieren würde, wenn der Browser die richtigen Objekte anzeigen würde, jedoch in einer anderen Reihenfolge als Sie sie im HTML angegeben haben? Was passiert, wenn der Absatz zwischen dem Seitentitel und dem Artikeltitel eingeklemmt ist und Sie Ihr Dokument nicht selbst so organisieren? Offensichtlich muss der Browser die Reihenfolge der Elemente und des Textes beibehalten.
In diesem Beispiel besteht das p-Element aus drei verschiedenen Teilen:
· Der Text vor dem em-Element · Das em-Element selbst · Der Text nach dem em-Element
Wenn Sie diese Reihenfolge durcheinander bringen, konzentrieren Sie sich möglicherweise auf den falschen Teil des Textes. Um alles in Ordnung zu halten, verfügt das p-Element über drei untergeordnete Objekte, in der im HTML von Listing 1 gezeigten Reihenfolge. Darüber hinaus ist der Schlüsseltext „wirklich“ kein untergeordnetes Element von p; er ist ein untergeordnetes Element von em, ein untergeordnetes Element von p.
Es ist sehr wichtig, dieses Konzept zu verstehen. Obwohl „really“-Text wahrscheinlich zusammen mit anderen p-Elementtexten erscheint, ist er immer noch ein direktes untergeordnetes Element des em-Elements. Es kann ein anderes Format als anderer P-Text haben und unabhängig von anderem Text verschoben werden.
Um dies im Hinterkopf zu behalten, versuchen Sie, den HTML-Code in den Auflistungen 2 und 3 grafisch darzustellen, um sicherzustellen, dass der Text das richtige übergeordnete Element hat (unabhängig davon, wie der Text letztendlich auf dem Bildschirm angezeigt wird).
Listing 2. Markup
<html>
mit cleverer Elementverschachtelung
<Kopf>
<title>Das ist etwas knifflig</title>
</head>
<Körper>
<h1>Passen Sie <u>gut</u> auf, okay?</h1>
<div>
<p>Dieses p ist wirklich nicht <em>notwendig</em>, aber es macht das
<span id="bold-text">Struktur <i>und</i> die Organisation</span>
der Seite einfacher zu verfolgen.</p>
</div>
</body>
</html>
Listing 3. Cleverere Elementverschachtelung
<html>
<Kopf>
<title>Noch schwierigeres Verschachteln</title>
</head>
<Körper>
<div id="main-body">
<div id="contents">
<Tabelle>
<tr><th>Schritte</th><th>Prozess</th></tr>
<tr><td>1</td><td>Finden Sie das <em>Wurzelelement</em> heraus.</td></tr>
<tr><td>2</td><td>Beschäftige dich zuerst mit dem <span id="code">Kopf</span>,
wie es normalerweise einfach ist.</td></tr>
<tr><td>3</td><td>Arbeiten Sie den <span id="code">Körper</span> durch.
<em>Nehmen Sie sich einfach Zeit</em>.</td></tr>
</table>
</div>
<div id="closing">
Dieser Link ist <em>nicht</em> aktiv, aber wenn ja, die Antworten
dazu <a href="answers.html"><img src="exercise.gif" /></a> würde
Sei da. Aber <em>mach die Übung trotzdem!</em>
</div>
</div>
</body>
</html>
Die Antworten auf diese Übungen finden Sie in den GIF-Dateien am Ende dieses Artikels, tricky-solution.gif in Abbildung 2 und trickier-solution.gif in Abbildung 3. Schauen Sie nicht rein, sondern nehmen Sie sich die Zeit, die Frage zunächst automatisch zu beantworten. Dies hilft Ihnen zu verstehen, wie streng die Regeln beim Organisieren des Baums gelten, und hilft Ihnen wirklich dabei, HTML und seine Baumstruktur zu beherrschen.
Was ist mit Attributen?
Stoßen Sie auf Probleme, wenn Sie herausfinden möchten, was Sie mit Immobilien tun sollen? Wie bereits erwähnt, hat das Attribut zwar einen eigenen Objekttyp, aber das Attribut ist tatsächlich kein untergeordnetes Element des Elements, das es anzeigt. Das verschachtelte Element und der Text befinden sich nicht auf derselben Attribut-„Ebene“, wie Sie feststellen werden Antworten auf die Übungen in Listing 2 und 3 Es werden keine Eigenschaften angezeigt.
Eigenschaften werden tatsächlich im von Browsern verwendeten Objektmodell gespeichert, es gibt jedoch einige Sonderfälle. Jedes Element verfügt über eine Liste verfügbarer Eigenschaften, getrennt von der Liste der untergeordneten Objekte. Ein div-Element könnte also eine Liste haben, die ein Attribut „id“ und ein weiteres Attribut „class“ enthält.
Denken Sie daran, dass Elementattribute eindeutige Namen haben müssen, d. h. ein Element darf nicht zwei „id“- oder zwei „class“-Attribute haben. Dies erleichtert die Pflege und den Zugriff auf die Liste. Wie Sie im nächsten Artikel sehen werden, können Sie einfach eine Methode wie getAttribute("id") aufrufen, um den Wert eines Attributs anhand des Namens abzurufen. Ähnliche Methodenaufrufe können auch verwendet werden, um Eigenschaften hinzuzufügen oder den Wert vorhandener Eigenschaften festzulegen (zurückzusetzen).
Es ist erwähnenswert, dass sich diese Liste aufgrund der Eindeutigkeit der Attributnamen von der Liste der Unterobjekte unterscheidet. Ein p-Element kann mehrere em-Elemente haben, sodass die Liste der untergeordneten Objekte mehrere Duplikate enthalten kann. Obwohl untergeordnete Listen und Eigenschaftslisten ähnlich funktionieren, kann eine davon Duplikate (untergeordnete Elemente eines Objekts) enthalten, während dies bei einer nicht der Fall ist (Eigenschaften eines Elementobjekts). Schließlich haben nur Elemente Attribute, sodass Textobjekte keine zusätzliche Liste zum Speichern von Attributen haben.
Unordentliches HTML
Bevor wir dazu übergehen, wie Browser Markup in eine Baumdarstellung umwandeln, gibt es noch ein weiteres Thema, das es wert ist, untersucht zu werden, nämlich wie Browser mit Markup umgehen, das nicht wohlgeformt ist. Wohlgeformt ist ein in XML weit verbreiteter Begriff und hat zwei grundlegende Bedeutungen:
·Jedes öffnende Tag hat ein passendes schließendes Tag. Daher stimmt jedes <p> im Dokument mit </p> überein, jedes <div> stimmt mit </div> überein und so weiter.
Das innerste Start-Tag stimmt mit dem innersten End-Tag überein, dann stimmt das nächstinnere Start-Tag mit dem nächstinneren End-Tag überein und so weiter. Daher ist <b><i>Fett und Kursivschrift</b></i> illegal, da das innerste öffnende Tag <i> nicht richtig mit dem innersten schließenden Tag <b> übereinstimmt. Um es wohlgeformt zu machen, ändern Sie entweder die Reihenfolge der öffnenden Tags oder die Reihenfolge der schließenden Tags. (Wenn Sie beide wechseln, tritt das Problem weiterhin auf).
Schauen Sie sich diese beiden Regeln genauer an. Diese beiden Regeln vereinfachen nicht nur die Dokumentenorganisation, sondern beseitigen auch Unsicherheiten. Sollte zuerst Fett und dann Kursiv angewendet werden? Oder genau das Gegenteil? Wenn Ihnen diese Reihenfolge und Unsicherheit keine große Sache zu sein scheint, denken Sie daran, dass CSS zulässt, dass Regeln andere Regeln außer Kraft setzen. Wenn also beispielsweise der Text im b-Element eine andere Schriftart hat als die Schriftart im i-Element, Die Reihenfolge, in der die Formatierung angewendet wird, ändert sich. Dies ist sehr wichtig. Daher spielt die Wohlgeformtheit von HTML eine entscheidende Rolle.
Wenn der Browser ein Dokument empfängt, das nicht wohlgeformt ist, wird er sein Bestes tun. Die resultierende Baumstruktur wird im besten Fall eine Annäherung an die Originalseite sein, die der Autor beabsichtigt hat, und im schlimmsten Fall nicht wiederzuerkennen sein. Wenn Sie jemals eine Seite in Ihren Browser geladen und völlig unerwartete Ergebnisse gesehen haben, haben Sie sich wahrscheinlich die Browserergebnisse angesehen, erraten, wie Ihre Struktur aussehen sollte, und dann frustriert weitergearbeitet. Dieses Problem lässt sich natürlich ganz einfach beheben: Stellen Sie sicher, dass das Dokument gut formatiert ist! Wenn Sie nicht sicher sind, wie Sie standardisiertes HTML schreiben, wenden Sie sich an Ihre Ressourcen.
Einführung in das DOM
Mittlerweile wissen Sie, dass Browser Webseiten in Objektdarstellungen umwandeln, und Sie haben vielleicht sogar vermutet, dass es sich bei Objektdarstellungen um DOM-Bäume handelt. DOM steht für Document Object Model und ist eine Spezifikation, die vom World Wide Web Consortium (W3C) verfügbar ist (einige DOM-bezogene Links finden Sie unter Ressourcen).
Noch wichtiger ist jedoch, dass das DOM die Typen und Eigenschaften von Objekten definiert und es dem Browser ermöglicht, Markups darzustellen. (Der nächste Artikel dieser Reihe befasst sich mit den Spezifikationen für die Verwendung des DOM in JavaScript- und Ajax-Code.)
Dokumentobjekt
Zuerst müssen Sie auf das Objektmodell selbst zugreifen. Es ist sehr einfach; um die integrierte Dokumentvariable in jedem JavaScript-Code zu verwenden, der auf einer Webseite ausgeführt wird, können Sie Code wie diesen schreiben:
var domTree = document;
Natürlich ist dieser Code selbst nutzlos, aber er zeigt, dass jedes Web Der Browser ermöglicht die Verwendung von Dokumentobjekten im JavaScript-Code, und es wird ein vollständiger Baum der Objektdarstellungsmarkierungen demonstriert (Abbildung 1).
Jedes Element ist ein Knoten
. Natürlich ist das Dokumentobjekt wichtig, aber das ist erst der Anfang. Bevor wir fortfahren, müssen wir noch einen weiteren Begriff lernen: Knoten. Sie wissen bereits, dass jeder Teil des Markups durch ein Objekt dargestellt wird, aber es handelt sich nicht um irgendein Objekt, sondern um einen bestimmten Objekttyp, einen DOM-Knoten. Spezifischere Typen wie Text, Elemente und Attribute erben alle von diesem Basisknotentyp. Es kann also Textknoten, Elementknoten und Attributknoten geben.
Wenn Sie bereits viel Erfahrung in der JavaScript-Programmierung haben, arbeiten Sie wahrscheinlich bereits mit DOM-Code. Wenn Sie diese Ajax-Reihe bisher verfolgt haben, müssen Sie schon seit einiger Zeit mit DOM-Code arbeiten. Beispielsweise verwendet die Codezeile var number = document.getElementById("phone").value; das DOM, um ein bestimmtes Element zu finden und ruft dann den Wert dieses Elements ab (in diesem Fall ein Formularfeld). Auch wenn Sie es nicht bemerken, verwenden Sie das DOM jedes Mal, wenn Sie ein Dokument in JavaScript-Code eingeben.
Um die Begriffe näher zu erläutern, die Sie bereits gelernt haben: Ein DOM-Baum ist ein Baum aus Objekten, genauer gesagt ein Baum aus Knotenobjekten. In Ajax-Anwendungen oder jedem anderen JavaScript können Sie diese Knoten verwenden, um Effekte wie das Entfernen von Elementen und deren Inhalten, das Hervorheben von bestimmtem Text oder das Hinzufügen neuer Bildelemente zu erzeugen. Da sie alle auf der Clientseite auftreten (dem Code, der im Webbrowser ausgeführt wird), treten diese Effekte sofort ein, ohne dass eine Kommunikation mit dem Server erforderlich ist. Das Endergebnis ist häufig, dass die Anwendung reaktionsschneller wirkt, da sich Inhalte auf der Webseite ohne lange Pausen ändern, während die Anfrage an den Server weitergeleitet und die Antwort interpretiert wird.
In den meisten Programmiersprachen müssen Sie den tatsächlichen Objektnamen jedes Knotentyps kennen, die verfügbaren Eigenschaften kennen lernen und Typen und Umwandlungen herausfinden, aber in JavaScript ist dies nicht notwendig. Sie können einfach eine Variable erstellen und ihr das gewünschte Objekt zuweisen (wie Sie bereits gesehen haben):
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;
Es gibt keinen Typ. JavaScript erstellt die Variable nach Bedarf und weist ihr den richtigen Typ zu. Dadurch wird die Arbeit mit dem DOM aus JavaScript trivial (ein zukünftiger Artikel wird dem DOM in Bezug auf XML gewidmet sein, was noch raffinierter sein wird).
Abschließend
möchte ich Sie hier mit etwas Spannung zurücklassen. Offensichtlich ist dies keine vollständig erschöpfende Beschreibung des DOM; dieser Artikel ist lediglich eine Einführung in das DOM. Das DOM bietet viel mehr als das, was ich heute vorgestellt habe!
Der nächste Artikel dieser Reihe wird diese Ideen weiter vertiefen und sich mit der Verwendung des DOM in JavaScript befassen, um Webseiten zu aktualisieren, HTML schnell zu ändern und ein interaktiveres Erlebnis für Ihre Benutzer zu schaffen. Ich werde in einem späteren Artikel, der sich mit der Verwendung von XML in Ajax-Anfragen befasst, noch einmal auf das DOM zurückkommen. Machen Sie sich also mit dem DOM vertraut, das einen großen Teil der Ajax-Anwendungen ausmacht.
An dieser Stelle wäre es recht einfach, das DOM im Detail zu verstehen, etwa detailliert zu beschreiben, wie man sich im DOM-Baum bewegt, die Werte von Elementen und Text abruft, durch Listen von Knoten iteriert usw., aber das könnte dazu führen, dass Sie mit dem Ich habe den Eindruck, dass es im DOM nur um Code geht, was nicht der Fall ist.
Denken Sie vor dem Lesen des nächsten Artikels über eine Baumstruktur nach und probieren Sie sie mit etwas eigenem HTML aus, um zu sehen, wie ein Webbrowser HTML in eine Baumansicht des Markups umwandelt. Denken Sie außerdem über die Organisation des DOM-Baums nach und üben Sie diese mit den in diesem Artikel vorgestellten Sonderfällen: Attribute, Text mit gemischten Elementen und Elemente ohne Textinhalt (wie das img-Element).
Ein solides Verständnis dieser Konzepte und das anschließende Erlernen der Syntax von JavaScript und des DOM (nächster Artikel) wird die Reaktion erheblich erleichtern.
Und vergessen Sie nicht, es gibt Antworten auf die Auflistungen 2 und 3, komplett mit Beispielcode!