Heim Web-Frontend js-Tutorial Was ist der Unterschied zwischen innerText und innerHTML von Dom-Objekten?

Was ist der Unterschied zwischen innerText und innerHTML von Dom-Objekten?

May 21, 2018 am 10:28 AM
dom

In diesem Artikel werden die relevanten Unterschiede zwischen innerText und innerHTML von Dom-Objekten erläutert.

innerText zeigt alle Ausgaben in Form von Text auf der Seite an, während inderHTML die HTML-Struktur des Elements zurückgibt und automatisch ein DOM basierend auf dem Inhalt erstellt.

Was ist der Unterschied zwischen elem.children und elem.childNodes?

elem.children dient dazu, andere DOM-Knotenobjekte als Textknoten abzurufen.
elem.childNodes dient dazu, alle DOM-Knoten abzurufen, einschließlich leerer Knoten und Textknoten.

Wie viele gängige Methoden gibt es zum Abfragen von Elementen?

getElementsById(): Suchen Sie das Element mit dem angegebenen ID-Attribut

getElementsByClassName(): Suchen Sie das Element mit dem angegebenen Klassenattribut

getElementsByTagName(): Suchen Sie das Element mit das angegebene Tag

getElementsByName(): Elemente mit Namensattribut finden

querySeletor(): Entspricht dem CSS-Selektor, findet den ersten Knoten mit passender Beschriftung

querySeletorAll(): Äquivalent zum CSS-Selektor, alle Knoten mit passendem Tag finden

Wie erstelle ich ein Element? Wie lege ich Attribute auf Elemente fest?

createElement() erstellt ein HTML-Element, der Parameter ist tagname, ohne <>

createTextNode() erstellt einen Textknoten und der Parameter ist der Textinhalt.

setAttribute() wird zum Festlegen von Elementattributen verwendet.

Elemente hinzufügen oder löschen.

appendChild(): Füge ein Element am Ende eines Elements hinzu

insertBefore(): Füge ein Element vor einem Element hinzu

removeChild(): Entferne ein Element

Was ist der Unterschied zwischen DOM0-Ereignis- und DOM2-Ereignisüberwachungsmethoden?

DOM-Level-0-Ereignis dient dazu, eine Funktionszuweisung an einen Ereignishandler zu binden und kann nur ein Ereignis gleichzeitig verarbeiten.

DOM2-Ebene definiert zwei Methoden zur Handhabung der Vorgänge zum Festlegen und Löschen von Ereignishandlern und kann mehrere Ereignishandler für Ereignisse hinzufügen.

Was ist der Unterschied zwischen attachmentEvent und addEventListener?

Die Anzahl der Parameter ist unterschiedlich, und attchEvent hat nur zwei. Der von attachmentEvent hinzugefügte Zeithandler kann nur in der Bubbling-Phase auftreten erfasst wird. Bühnen- oder Bubbling-Bühnenverarbeitung

Der erste Parameter von addEventListener ist der Ereignistyp (z. B. Klick, Laden), während der erste Parameter von addachEvent den Namen des Ereignisses angibt Verarbeitungsfunktion (onclick, onload)

Der Bereich des Ereignishandlers ist unterschiedlich. Der Bereich von addEventListener ist das Element selbst. Dies bezieht sich auf das auslösende Element, und der Ereignishandler attachmentEvent wird in der globalen Variablen ausgeführt. Dies ist Fenster

Wenn Sie einem Ereignis mehrere Ereignishandler hinzufügen, ist die Ausführungsreihenfolge unterschiedlich. addEventListener wird in der Reihenfolge des Hinzufügens hinzugefügt, während addachEvent mehrere Ereignishandler in unregelmäßiger Reihenfolge hinzufügt (wenn es nur wenige gibt). Methoden hinzugefügt, die meisten davon werden in der umgekehrten Reihenfolge ausgeführt, aber wenn Sie zu viele hinzufügen, wird es unregelmäßig), wenn Sie also mehr als eine hinzufügen, verlassen Sie sich auf die Reihenfolge der Ausführungsfunktionen , Sie müssen sich selbst darum kümmern und können sich nicht auf den Browser verlassen.

Erklären Sie das Bubbling von IE-Ereignissen und den Mechanismus zur Ausbreitung von DOM2-Ereignissen.

IE-Ereignis-Bubbling bedeutet, dass Ereignisse vom innersten Element beginnen und sich Schicht für Schicht nach oben bis zum HTML-Wurzelknoten ausbreiten.

DOM2-Ereignisausbreitungsmechanismus:

Ereigniserfassungsphase: Ereignisse suchen Schicht für Schicht vom Wurzelknoten abwärts nach dem Zielknoten des Ereignisses.

Zielphase: Erreichen Sie den Zielknoten und führen Sie das Zielereignis aus.

Ereignis-Bubbling-Phase: Ereignisse werden Schicht für Schicht vom Zielknoten zum Wurzelknoten zurückverfolgt.

Wie kann verhindert werden, dass Ereignisse übersprudeln? Wie kann ein Standardereignis verhindert werden?

Verwenden Sie die Funktion stopPropagation(), um das Sprudeln von Ereignissen zu stoppen.

Verwenden Sie die Funktion „preventDefault()“, um das Standardverhalten des Ereignisses abzubrechen.

Codefrage

Es gibt den folgenden Code, der erfordert, dass die Konsole den Textinhalt jedes Elements li anzeigt, wenn auf das Element li geklickt wird. Kompatibilität wird nicht berücksichtigt

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li></ul>
  <script>var ct = document.querySelector(&#39;.ct&#39;),
    li= ct.querySelectorAll(&#39;li&#39;);for(var i= 0; i< li.length; i++){
    li[i].onclick = function(){        console.log(this.innerText);
    }
}</script>
Nach dem Login kopieren

In diesem Artikel werden die relevanten Unterschiede zwischen innerText und innerHTML von Dom-Objekten erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einige grundlegende Fragen zu JS

Wie man modularisiert, erfordert die Verwendung von Front-End-JS .js

Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen innerText und innerHTML von Dom-Objekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Welche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten? Welche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten? May 11, 2023 pm 04:55 PM

1. Native js ruft den DOM-Knoten ab: document.querySelector (Selektor) document.getElementById (ID-Selektor) document.getElementsByClassName (Klassenselektor).... 2. Holen Sie sich das Instanzobjekt der aktuellen Komponente in vue2: weil jeder vue Jeder Die Komponenteninstanz enthält ein $refs-Objekt, das Verweise auf die entsprechenden DOM-Elemente oder Komponenten speichert. Daher verweisen die $refs der Komponente standardmäßig auf ein leeres Objekt. Sie können der Komponente zunächst ref="name" hinzufügen und dann this.$refs übergeben.

Was bedeutet vue dom? Was bedeutet vue dom? Dec 20, 2022 pm 08:41 PM

DOM ist ein Dokumentobjektmodell und eine Schnittstelle für die HTML-Programmierung. Elemente auf der Seite werden über DOM manipuliert. Das DOM ist eine speicherinterne Objektdarstellung eines HTML-Dokuments und bietet eine Möglichkeit, mithilfe von JavaScript mit Webseiten zu interagieren. Das DOM ist eine Hierarchie (oder ein Baum) von Knoten mit dem Dokumentknoten als Wurzel.

Anleitung zur DOM-Manipulation in PHP Anleitung zur DOM-Manipulation in PHP May 21, 2023 pm 04:01 PM

In der Webentwicklung ist DOM (DocumentObjectModel) ein sehr wichtiges Konzept. Es ermöglicht Entwicklern, das HTML- oder XML-Dokument einer Webseite einfach zu ändern und zu bedienen, z. B. Elemente hinzuzufügen, zu löschen, zu ändern usw. Die integrierte DOM-Operationsbibliothek in PHP bietet Entwicklern auch umfangreiche Funktionen. In diesem Artikel wird die DOM-Operationsanleitung in PHP vorgestellt, in der Hoffnung, allen zu helfen. Das Grundkonzept von DOM DOM ist eine plattformübergreifende, sprachunabhängige API, die dies kann

Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen? Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen? May 12, 2023 pm 01:28 PM

Beschreibung des Vue3ref-Bindungs-DOM- oder Komponentenfehlerursachenanalyse-Szenarios In Vue3 wird häufig Ref zum Binden von Komponenten oder DOM-Elementen verwendet. Oft wird Ref eindeutig zum Binden verwandter Komponenten verwendet, aber die Ref-Bindung schlägt häufig fehl. Beispiele für Ref-Bindungsfehlersituationen Die überwiegende Mehrheit der Fälle, in denen die Ref-Bindung fehlschlägt, ist darauf zurückzuführen, dass beim Binden des Refs an die Komponente die Komponente noch nicht gerendert wurde und die Bindung daher fehlschlägt. Oder die Komponente wird zu Beginn nicht gerendert und die Referenz ist nicht gebunden. Wenn die Komponente mit dem Rendern beginnt, wird auch die Bindung zwischen der Referenz und der Komponente abgeschlossen. Zu diesem Zeitpunkt treten Probleme auf beim Einsatz komponentenbezogener Methoden. Die an ref gebundene Komponente verwendet v-if, oder ihre übergeordnete Komponente verwendet v-if, um die Seite zu veranlassen

Was sind die Dom- und Bom-Objekte? Was sind die Dom- und Bom-Objekte? Nov 13, 2023 am 10:52 AM

Es gibt 5 DOM-Objekte, darunter „Dokument“, „Element“, „Knoten“, „Ereignis“ und „Fenster“. 2. „Fenster“, „Navigator“, „Standort“ und „Verlauf“ und „Bildschirm“ und weitere 5 Arten von Stücklistenobjekten.

Was ist der Unterschied zwischen bom und dom? Was ist der Unterschied zwischen bom und dom? Nov 13, 2023 pm 03:23 PM

BOM und DOM unterscheiden sich hinsichtlich Rolle und Funktion, Beziehung zu JavaScript, gegenseitiger Abhängigkeit, Kompatibilität verschiedener Browser und Sicherheitsaspekten. Detaillierte Einführung: 1. Rolle und Funktion Die Hauptfunktion von BOM besteht darin, das Browserfenster zu bedienen und zu steuern. Die Hauptfunktion von DOM besteht darin, das Webdokument in einen Objektbaum umzuwandeln Entwickler können die Elemente und Inhalte der Webseite über diesen Objektbaum abrufen und ändern. 2. Beziehung zu JavaScript usw.

Was sind die integrierten Objekte von DOM? Was sind die integrierten Objekte von DOM? Dec 19, 2023 pm 03:45 PM

dom内置对象有: 1、document;2、window;3、navigator;4、location;5、history;6、screen;7、document.documentElement;8、document.body;9、document.head;10、document .title;11、document.cookie。

Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert Aug 07, 2022 am 09:36 AM

​In diesem Artikel erfahren Sie, wie Sie horizontale und vertikale Scroll-Animationen von DOM-Elementen in js implementieren. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

See all articles