Heim > Web-Frontend > js-Tutorial > Hauptteil

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

jacklove
Freigeben: 2018-05-21 10:28:40
Original
2520 Leute haben es durchsucht

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!

Verwandte Etiketten:
dom
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!