Inhaltsverzeichnis
Im ersten Teil dieses Tutorials haben wir gesehen, wie das DOM aufgebaut ist und wie es funktioniert, in diesem werden wir weiter damit arbeiten, um seine Funktionalitäten zu erweitern und alle Elemente unseres HTML-Dokuments manipulieren zu können.Arbeiten mit dem DOM
Um auf das Dokumentobjekt zuzugreifen, verwenden wir eine globale Dokumentvariable; Diese Variable ist eines der Schlüsselobjekte, die der Browser für uns erstellt, da wir über dieses Dokumentobjekt auf die Dokumentinformationen als Ganzes zugreifen können und uns individuellen Zugriff auf jedes Dokumentobjekt ermöglicht.
Sehen wir uns wie immer ein Beispiel an, mit dem wir die uns bekannte Theorie mit der Art und Weise, wie sie in der Realität angewendet wird, in Einklang bringen können.
BeispielEs gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.
Einer der interessantesten Aspekte von Obst ist die in jedem Land verfügbare Vielfalt. Ich lebe in der Nähe von London, in einer Gegend, die für ihre Äpfel bekannt ist.
Der Code, mit dem wir die . verwenden SONNE Es ist ziemlich kurz und einfach, aber es fängt die verschiedenen Verwendungen ein, die wir ihm geben können. Wir werden den Code Teil für Teil erklären, um zu sehen, wie wir die Objekte verwendet haben.
Eine der grundlegendsten Aktionen, die wir verwenden können, besteht darin, die Informationen aus dem HTML-Dokument abzurufen, mit dem wir arbeiten. Die erste Zeile, die wir in unseren Code eingefügt haben, macht genau das und wir können sie sehen:
document.writeln ("
URL: "+ Dokument.URL);
In diesem Fall lesen wir den Wert der Immobilie document.URL, die die URL des aktuellen Dokuments zurückgibt, d. h. die URL, die der Browser zum Laden des Dokuments verwendet hat, in dem sich der Code befindet.
Wir sehen auch, wie wir die writeln-Methode verwenden:
document.writeln ("
URL: "+ Dokument.URL);
Diese Methode fügt einfach Inhalt am Ende unseres HTML-Dokuments hinzu. In diesem speziellen Fall beginnen wir mit dem Hinzufügen eines Tags
und dann die URL-Eigenschaft, damit haben wir bereits Struktur und Inhalt des DOM geändert.
Als nächstes haben wir alle Elemente ausgewählt, die das p-Tag im Dokument haben, dazu verwenden wir die folgende Zeile:
var elems = document.getElementsByTagName ("p");
Wie wir die Methode sehen getElementsByTagName Es ist diejenige, die unserem Zweck dient, gleichzeitig weisen wir alles, was diese Methode sammelt, den variablen Elementen zu.
In der nächsten Zeile führen wir eine Iteration über die Variable elems durch und erhalten die zugewiesenen Objekte. Für jedes Objekt, das wir iterieren werden, fügen wir eine Textzeile mit seiner ID hinzu und später werden wir seine Attribute ändern, um sein Aussehen zu ändern .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" + elems [i] .id); elems [i] .style.border = "medium double black"; elems [i] .style.padding = "4px"; }
Wie wir sehen, fügen wir jedem Element, das wir in unseren variablen Elems gespeichert haben, einen Rahmen hinzu und fügen zusätzlich eine Auffüllung hinzu.
Lassen Sie uns nach all dem endlich sehen, wie das alles im Browser aussieht:
VERGRÖSSERN
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben 
