So bedienen Sie DOM in JS

DOM (Document Object Model) ist ein Standard des W3C (World Wide Web Consortium). DOM definiert den Standard für den Zugriff auf HTML und XML: W3C Document Object Model (DOM) ist eine plattform- und sprachneutrale Schnittstelle, die es ermöglicht dynamischen Zugriff durch Programme und Skripte und aktualisieren Sie den Inhalt, die Struktur und den Stil des Dokuments.

Der W3C-Dom-Standard ist in drei verschiedene Teile unterteilt: 1. Core DOM – ein Standardmodell für jedes strukturierte Dokument 2. XML DOM – ein Standardmodell für XML-Dokumente 3. HTML DOM – für HTML-Dokumente Der Standard Modell von

wobei im HTML-DOM alles ein Knoten ist und das DOM als Anzahl von Knoten behandelt wird 1. Das gesamte Dokument ist ein Dokumentknoten 2. Jedes HTML-Element ist ein Elementknoten 3 . Der Text innerhalb eines HTML-Elements ist ein Textknoten 4. Jedes HTML-Attribut ist ein Attributknoten 5. Anmerkungen sind Kommentarknoten

HTML DOM behandelt HTML-Dokumente als Baumstruktur, die als Knotenbaum bezeichnet wird DOM, auf alle Knoten im Baum kann über JavaScript zugegriffen werden, alle HTML-Knoten (Elemente) können geändert werden und Knoten können erstellt oder gelöscht werden.

Einige häufig verwendete HTML-DOM-Methoden: 1.getElementById( id) -Rufen Sie den Knoten (Element) mit der angegebenen ID ab. 2.appendChid(node)-Fügen Sie einen neuen untergeordneten Knoten (Element) ein. 3.removeChild(node)-Entfernen Sie den untergeordneten Knoten (Element)

Einige häufig verwendete HTML-Codes DOM-Attribute: 1.innerHTML – der Textwert des Knotens (Elements) 2.parentNode – der übergeordnete Knoten des Knotens (Elements) 3.childNodes – der untergeordnete Knoten des Knotens (Elements) 4..attributes – der Attributknoten des Knotens (Elements)

DOM-Operation

Element erstellen

var newp = document.createElement("p"); ; ID festlegen

newp.id = "first";Hintergrundfarbe festlegen newp.style.background = "red";Elementfeld zum Text hinzufügen

Das Element abrufen, das zuerst hinzugefügt werden soll

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp);//Es gibt zwei Inhalte in body, einer ist newp und der andere ist box // Die aktuelle Situation besteht darin, den Inhalt von newp hinter der Box einzufügen

Wenn Sie den Inhalt von p an der Vorderseite der Box einfügen möchten, ist Folgendes der Fall wie folgt: body.insertBefore(newp, box); lösche das Element body.removeChild( box);//Remove box label box.remove();DOM attribute

node: label text annotation deklaration (doctype)

Sie können alle Knoten der Elementreihenfolge über die folgende Methode abrufen: console log(box.childNodes); Rufen Sie den untergeordneten Knoten des Labeltyps ab, und der erhaltene Knoten ist ein Label console.log(box). cheildren[0]); Größe und Position console.log(newp.offsetWidth);//Die Druckbreite umfasst den Rand console .log(newp.clientWidth);//Enthält keine Ränder oder Bildlaufleisten (sichtbarer Bereich) Konsole. log(newp.scrollHeight);//Es ist auch die vertikale/horizontale Scroll-Distanz des Elements oder des Elements. Scrollen Sie durch den unsichtbaren Teil des Überlaufs und verarbeiten Sie den sichtbaren Teil. overflow:scroll; Die Position der Bildlaufleiste wird relativ zur Position des übergeordneten Elements angezeigt console.log(newp.offsetTop); console.log(newp.offsetLeft) ;Die Entfernung, um die das untergeordnete Element nach oben scrollt, werden die oben genannten Elemente gelesen -only console.log(newp.scrollTop)

Timer

Einmaliger Timer, der nur einmal verwendet werden kann

Schreibmethode 1: var time = setTimeout(function (){ console.log("Einmaliger Timer"); },1000); Schreibmethode 2: function f1(){ console.log("Einmaliger Timer"); } setTimeout(f1,1000 ); einmaligen Timer löschen clearTimeout(time); Loop-Timer, die Funktion wird hin und wieder ausgeführt

Schreiben 1: var timer = setInterval (funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000); Löschen Sie die Schleife timer clearInterval(timer); DOM ist eine HTML-Dokumentstruktur, die es JS tatsächlich ermöglicht, HTML-Elemente gemäß einer Spezifikation zu betreiben, die Wurzel DOM ist ein Dokumentobjekt, das über viele Attribute und Methoden verfügt, z. B. zum Erstellen von Knoten, zum Entfernen von Knoten, zum Ändern von Attributen usw. Die Entstehung von DOM-Objekten dient dazu, JavaScript die Bedienung von HTML-Tags zu erleichtern Das Objektmodell (Dokumentobjektmodell) basiert ebenfalls auf Javascript, um den Status des Dokuments dynamisch zu ändern (z. B. durch Klicken auf Ereignisse). Daher wird das HTML-Dokumentobjekt (jedes Tag) bedient.

CSS ist nur ein HTML-Dokumentstil, und JavaScript kann HTML und CSS kombinieren, was früher als DHTML (Dynamic HTML) bezeichnet wurde.

DOM dient dazu, die Knoten in XML (oder HTML) zu definieren ) in eine grundlegende vereinheitlichte Die Objektdaten können technische Spezifikationen bereitstellen, die durch eine Programmiersprache (z. B. Javascript) gesteuert werden.

Sie können die Javascript-Sprache verwenden, um das DOM zu bedienen, um die Webseite zu ändern. Sie müssen Javascript mitteilen, welcher Knoten bedient werden soll

Durch die Manipulation des DOM können Sie den Interaktionsmodus von Webseiten ändern. Auch ohne Javascript ist dies möglich Verwenden Sie andere Sprachen, um DOM zu manipulieren.

DOM ist ein Baum, die Werte und die Blätter sind nummeriert. Sie teilen einem Skript eine Funktion mit, um herauszufinden, welches Blatt auf diesem Zweig erfolgen soll und welche Änderungen vorgenommen werden sollen zu diesem Blatt gemacht

Wenn Sie Daten in die Suchleiste von Zhihu eingeben, erfasst Javascript Ihre Eingabe, verwendet eine asynchrone Abfrage an den Server und zeigt die Suchergebnisse dynamisch an

Wenn Sie nach unten rutschen, erfasst Javascript die Distanz, die Sie schieben, und ermittelt anhand der Distanz, ob sich das DOM geändert hat. Anschließend kann die obere Navigationsleiste mit dem Browserfenster scrollen, sodass Sie nicht zurückblicken müssen Wenn Sie auf die Schaltfläche „Ändern“ klicken, erfasst Javascript das Mausklickereignis dieser Schaltfläche und gibt eine bearbeitbare Antwort an Sie zurück.

Javascript kann das DOM nicht wirklich ändern, sondern nur den angezeigten Inhalt. Wenn Sie es aktualisieren, werden Sie feststellen dass der präsentierte Inhalt verschwindet.

Aber Sie können diese Änderungen in Form von Anforderungen an die Back-End-Sprachschnittstelle übergeben, und der PHP-, Python-, Java-Knoten usw. der Back-End-Sprache führt nachfolgende Vorgänge aus Ändern Sie nach Erhalt Ihrer Anfrage die Serverdaten, damit die Änderungen wirksam werden und nach der Aktualisierung nicht verschwinden

Es besteht jedoch keine Notwendigkeit, dass der Server mit Benutzerinteraktionen wie dem Verschieben von Popup-Fenstern vermischt wird Die Interaktion wird nur vorübergehend aufgebraucht und muss nicht auf dem Server gespeichert werden.

HTML drückt das aus statische Struktur (die Grundelemente der Webseite und die Grundfunktionen jedes Elements) Welche Bedeutung kann durch die Grundfunktionen von Elementen erzeugt werden und welche Art von Inhalt kann diese Bedeutung erzeugen)

CSS präsentiert hierarchische Verschönerung (grundlegende und spezielle Attribute von Elementen, Form, Status von Elementen, Layout von Elementen)

Javascript ist für die dynamische Interaktion verantwortlich (Bedienung von DOM mit AJAX für asynchrone Aktualisierung und Interaktion mit dem Server). Der eingeführte Link ist nicht verantwortlich schlecht. https://www.zhihu.com/question/34219998/answer/58211568DOM ist die Schnittstelle für Javascript zum Betreiben von Webseiten. Der vollständige Name lautet Document Object Model , sodass Javascript-Skripte zum Ausführen verschiedener Vorgänge (z. B. Hinzufügen und Löschen von Elementen usw.) verwendet werden können.

Der Browser analysiert basierend auf dem DOM-Modell die dokumentierte Struktur (z. B. HTML oder XML). usw.) in eine Reihe von Knoten aufteilen und diese Knoten dann in eine Baumstruktur (Dom Tree) analysieren. Alle Knoten und die endgültige Baumstruktur verfügen über standardisierte externe Schnittstellen, sodass das DOM als Programmierschnittstelle für Webseiten verstanden werden kann Wir verwenden derzeit DOM3

Genau genommen gehört DOM nicht zu Javascript, aber DOM-Operationen sind die häufigsten Aufgaben von Javascript, und die häufigsten Aufgaben von Javascript sind die häufigsten DOM-Manipulationssprachen .

DOM

DOM, das Document Object Model, ist ein Standard des W3C (World Wide Web Consortium)

DOM definiert einen Standard für den Zugriff auf HTML und XML: W3C Document Object Model (DOM ) ist eine plattformneutrale Sprachschnittstelle, die es Programmen und Skripten ermöglicht, dynamisch auf den Inhalt, die Struktur und den Stil des Dokuments zuzugreifen und diese zu aktualisieren

Der W3C-DOM-Standard ist in drei verschiedene Teile unterteilt: 1. Kern-DOM – für jedes strukturierte Dokument Standardmodell 2.XML DOM – Standardmodell für XML-Dokumente 3.HTML DOM – Standardmodell für HTML-Dokumente

Unter ihnen ist im HTML-DOM alles ein Knoten, und DOM wird als Knoten betrachtet Anzahl der Knoten HTML.1. Das gesamte Dokument ist ein Dokumentknoten 2. Jedes HTML-Element ist ein Elementknoten 3. Der Text innerhalb eines HTML-Elements ist ein Textknoten 4. Jedes HTML-Attribut ist ein Attributknoten 5. Kommentare sind Kommentarknoten

HTML-DOM behandelt HTML-Dokumente als Baumstruktur. Über HTML-DOM kann auf alle Knoten im Baum zugegriffen und erstellt werden . Oder löschen Sie einen Knoten.

Einige häufig verwendete HTML-DOM-Methoden: 1.getElementById(id) – holen Sie sich den Knoten (Element) mit der angegebenen ID 2.appendChid(node) – fügen Sie einen neuen untergeordneten Knoten (Element) ein ) 3 .removeChild(node) – Untergeordnete Knoten (Elemente) löschen

Einige häufig verwendete HTML-DOM-Attribute: 1.innerHTML – der Textwert des Knotens (Elements) 2.parentNode – der übergeordnete Knoten des Knotens (Element) 3.childNodes -Untergeordneter Knoten 4..Attribute des Knotens (Element) -Attributknoten des Knotens (Element)

DOM-Operation

Element erstellen

var newp = document.createElement(" p");Legen Sie den Klassennamen fest newp.className = "item";Legen Sie die ID fest

newp.id = "first";Legen Sie die Hintergrundfarbe fest newp.style.background = " red";Elementbox in den Textkörper einfügen

Das zuerst hinzuzufügende Element abrufen

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName ("box")[0];body. appendChild(newp);//Es gibt derzeit zwei Inhalte im Körper, einer ist newp und der andere ist box//Die aktuelle Situation besteht darin, den Inhalt von newp hinter der Box einzufügen

Wenn Sie den Inhalt von p in die Vorderseite der Box einfügen möchten, gehen Sie wie folgt vor: body.insertBefore(newp, box); löschen Sie das Element body.removeChild(box);//entfernen Sie die Boxbeschriftung box.remove(); DOM-Attribut

Knoten: Beschriftungstextanmerkungsanweisung ( doctype)

Sie können alle Knoten der Elementreihenfolge über die folgende Methode abrufen: console.log(box. childNodes); Rufen Sie den untergeordneten Knoten des Etikettentyps ab, und der erhaltene Knoten ist ein Etikett. console.log(box.cheildren[0 ]); Size position console.log(newp.offsetWidth); log(newp.clientWidth); //Beinhaltet keinen Rahmen oder Bildlaufleiste (sichtbarer Bereich) console.log(newp. scrollHeight);//Es ist auch die Entfernung, um die das Element vertikal/horizontal gescrollt wurde, oder der unsichtbare Teil des durch den Überlaufprozess weggerollten Elements ist standardmäßig sichtbar. overflow:scroll; Die Position der Bildlaufleiste wird relativ zur Positionierung der übergeordneten Ebene angezeigt. ; console.log(newp.offsetLeft); ein Abstand, wenn das untergeordnete Element nach oben gescrollt wird, sind die oben genannten Elemente schreibgeschützt console.log(newp.scrollTop)

Timer

Einmaliger Timer, kann nur einmal verwendet werden

Schreibmethode 1: var time = setTimeout(function(){ console.log("One-time timer" ; },1000);Schreibmethode 2: function f1(){ console.log("One-time timer"); } setTimeout(f1,1000);Löschen Sie den einmaligen Timer clearTimeout(time);Loop-Timer, alle Nach einer bestimmten Zeit die Funktion

wird einmal ausgeführt. Schreibmethode 1: var timer = setInterval(funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000); (Timer); DOM ist eine Spezifikation, die JS zum Betreiben von HTML-Elementen ermöglicht. Dieses Objekt verfügt über viele Attribute und Platzierungsmethoden, z. B. das Erstellen von Knoten Das Aufkommen von DOM-Objekten und das Ändern von Attributen dient dazu, JavaScript den Betrieb von HTML-Tags zu erleichtern. DOM ist ein Dokumentobjektmodell, das auch auf HTML-Dokumenten basiert (z. B. Klickereignisse) ändern den Status des Dokuments, sodass die Bedienung des DOM die Bedienung des HTML-Dokumentobjekts (jedes Tags) ist.

CSS formatiert nur das HTML-Dokument, und Javascript kann HTML und CSS kombinieren ist das, was früher DHTML (dynamisches HTML) genannt wurde

DOM definiert Knoten in XML (oder HTML) als grundsätzlich einheitliche Objektdaten und kann technische Spezifikationen bereitstellen, die durch Programmiersprache (wie Javascript) gesteuert werden

Sie können die Javascript-Sprache verwenden, um die Webseite zu ändern. Sie müssen Javascript mitteilen, um das DOM zu bearbeiten Betreiben Sie DOM

DOM ist ein Baum, die Werte und Blätter sind nummeriert. Sie teilen einem Skript eine Funktion mit, um herauszufinden, welches Blatt dieses Zweigs. Welche Änderungen sollte Ye Zi dafür vornehmen?

Wenn Sie Daten in die Suchleiste von Zhihu eingeben, erfasst Javascript Ihre Eingabe, verwendet eine asynchrone Abfrage an den Server und zeigt die Suchergebnisse dynamisch an.

Wenn Sie nach unten rutschen, erfasst Javascript die Distanz, die Sie schieben, und ermittelt anhand der Distanz, ob sich das DOM geändert hat. Anschließend kann die obere Navigationsleiste mit dem Browserfenster scrollen, sodass Sie nicht zurückblicken müssen Wenn Sie auf die Schaltfläche „Ändern“ klicken, erfasst Javascript das Mausklickereignis dieser Schaltfläche und gibt eine bearbeitbare Antwort an Sie zurück.

Javascript kann das DOM nicht wirklich ändern, sondern nur den angezeigten Inhalt. Wenn Sie es aktualisieren, werden Sie feststellen dass der präsentierte Inhalt verschwindet.

Aber Sie können diese Änderungen in Form von Anforderungen an die Back-End-Sprachschnittstelle übergeben, und der PHP-, Python-, Java-Knoten usw. der Back-End-Sprache führt nachfolgende Vorgänge aus Ändern Sie nach Erhalt Ihrer Anfrage die Serverdaten, damit die Änderungen wirksam werden und nach der Aktualisierung nicht verschwinden

Es besteht jedoch keine Notwendigkeit, dass der Server mit Benutzerinteraktionen wie dem Verschieben von Popup-Fenstern vermischt wird Die Interaktion wird nur vorübergehend aufgebraucht und muss nicht auf dem Server gespeichert werden.

HTML drückt das aus statische Struktur (die Grundelemente der Webseite und die Grundfunktionen jedes Elements) Welche Bedeutung kann durch die Grundfunktionen von Elementen erzeugt werden und welche Art von Inhalt kann diese Bedeutung erzeugen)

CSS präsentiert hierarchische Verschönerung (grundlegende und spezielle Attribute von Elementen, Form, Status von Elementen, Layout von Elementen)

Javascript ist für die dynamische Interaktion verantwortlich (Bedienung von DOM mit AJAX für asynchrone Aktualisierung und Interaktion mit dem Server). Der eingeführte Link ist nicht verantwortlich schlecht. https://www.zhihu.com/question/34219998/answer/58211568DOM ist die Schnittstelle für Javascript zum Betreiben von Webseiten. Der vollständige Name lautet Document Object Model , sodass Javascript-Skripte zum Ausführen verschiedener Vorgänge (z. B. Hinzufügen und Löschen von Elementen usw.) verwendet werden können.

Der Browser analysiert basierend auf dem DOM-Modell die dokumentierte Struktur (z. B. HTML oder XML). usw.) in eine Reihe von Knoten aufteilen und diese Knoten dann in eine Baumstruktur (Dom Tree) analysieren. Alle Knoten und die endgültige Baumstruktur verfügen über standardisierte externe Schnittstellen, sodass das DOM als Programmierschnittstelle für Webseiten verstanden werden kann Wir verwenden derzeit DOM3

Genau genommen gehört DOM nicht zu Javascript, aber DOM-Operationen sind die häufigsten Aufgaben von Javascript, und die häufigsten Aufgaben von Javascript sind die häufigsten DOM-Manipulationssprachen .

相关推荐：

js中DOM知识点分享

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