Heim >Web-Frontend >js-Tutorial >DOM in JavaScript

DOM in JavaScript

Linda Hamilton
Linda HamiltonOriginal
2025-01-22 18:32:10430Durchsuche

DOM in JavaScript

Dokumentobjektmodell (DOM)

DOM API ist eine Programmierschnittstelle für Webdokumente. Es stellt eine Seite dar, sodass Programme die Struktur, den Stil und den Inhalt des Dokuments ändern können.

Das DOM stellt ein Dokument als Baum von Objekten dar; jedes Objekt repräsentiert einen Teil der Seite.

DOM-Operationen in JavaScript

Bei der Implementierung von DOM in JavaScript können wir die folgenden Grundkenntnisse berücksichtigen:

  1. querySelector: Dies ist ein gieriger Selektor. Es wählt das erste angegebene Element aus.

Zum Beispiel:

querySelector("h1")

Dadurch wird das erste h1-Element im gesamten HTML-Dokument gefunden

  1. querySelectorAll: Dies zielt auf alle h3-Elemente im HTML-Dokument ab.

Zum Beispiel:

querySelectorAll("h3")

Diese werden als Knotenliste in der Konsole ausgegeben.

Hinweis: Die Knotenliste sieht aus wie ein Array, aber es gibt einen großen Unterschied

Knotenlisten sind Browser-APIs und Arrays sind JavaScript-APIs. Kurz gesagt, Knotenlisten gehören nicht zu JavaScript, daher können auf ihnen keine Schleifen implementiert werden.

Außerdem sind getElementbyTagName() und querySelectorAll keine JavaScript-Methoden, sondern Browser-APIs.

innerHTML und innerText

Es wird empfohlen, innerHTML anstelle von innerText zu verwenden, da dies andere daran hindert, Ihr Skript zu ändern.

Methoden zum Positionieren von Elementen

  • Wir haben viele Möglichkeiten, Elemente in einem Dokument zu finden oder auszuwählen, die bearbeitet werden sollen.

Zu diesen Methoden gehören:

Nach Ausweis mit Namen nach Klasse nach Tag Nach Tag-Name

Hinweis: Wir verwenden niemals ID und Klasse, um etwas aus dem Browser auszuwählen.

Daher verwenden wir querySelector.

Schlüsselkonzepte in JavaScript.

a) Heben: Lassen Sie uns diesen Punkt anhand eines Beispiels veranschaulichen,

Zum Beispiel:

  1. console.log(a);
  2. var a;
  3. a = 5;
  4. console.log(a);

Bei der Ausführung in der Konsole wird eine Online-1 als undefiniert ausgegeben.

Das bedeutet, dass, obwohl wir a nicht explizit am Anfang deklariert haben, es „magisch“ im Browser deklariert wurde, was als Heben bezeichnet wird.

Normalerweise wäre die Ausgabe für Zeile 4 5, da a explizit initialisiert wurde.

b) Abschluss: Bei jeder Erstellung einer Funktion wird ein Abschluss erstellt.

c) Globaler Ausführungskontext : Der globale Ausführungskontext ist die Umgebung, in der JavaScript-Code ausgeführt wird, wenn er sich nicht in einer Funktion befindet.

d) Aufrufstapel: Wenn ein Skript eine Funktion aufruft, fügt der Interpreter sie dem Stapel hinzu und beginnt mit der Ausführung der Funktion.

Mein GitHub-Link LinkedIn

Das obige ist der detaillierte Inhalt vonDOM in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn