Besprechen Sie die grundlegenden Eigenschaften von DOM ausführlich in den Javascript-Kenntnissen

Struktur- und Inhaltsattribute

nodeType

Alle Knoten haben Typen und es gibt insgesamt 12 Knotentypen.

Code kopieren Der Code lautet wie folgt:

Schnittstellenknoten {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}

Die beiden wichtigsten Knoten sind der Elementknoten (1) und der Textknoten (3). Der Rest wird selten verwendet.
Wenn wir beispielsweise alle untergeordneten Elementknoten auflisten, können wir darüber iterieren und childNodes[i].nodeType != 1 zur Erkennung verwenden.
Das Folgende ist der Implementierungscode:

Code kopieren Der Code lautet wie folgt:

Zulässige Leser:

• John


• Bob

<script> var childNodes = document.body.childNodes<br> for(var i=0; i<childNodes.length; i ) {<br /> if (childNodes[i].nodeType != 1) continue<br /> alarm(childNodes[i])<br /> }<br /> </script>

*Denken Was wird der folgende Code auffordern:

Code kopieren Der Code lautet wie folgt:

<script><br> Alert(document.body.lastChild.nodeType)<br> </script>

nodeName, tagName

Sowohl nodeName als auch tagName enthalten den Namen des Knotens.
Für document.body

alert( document.body.nodeName ) // BODY
Alle Knotennamen in HTML werden großgeschrieben.

Wenn nodeName nicht großgeschrieben wird
Diese Situation kommt relativ selten vor. Wenn Sie neugierig sind, können Sie weiter unten lesen.
Wie Sie wahrscheinlich bereits wissen, verfügen Browser über zwei Parsing-Methoden: den HTML-Modus und den __XML-Modus. Normalerweise wird das HTML-Schema verwendet, aber wenn die XMLHttpRequest__-Technologie zum Abrufen eines XML-Dokuments verwendet wird, wird das XML-Schema verwendet.
Der XML-Modus wird in Firefox auch verwendet, wenn der Inhaltstyp eines XHTML-Dokuments auf xmlish gesetzt ist.
Knotennamen werden im __XML-Schema beibehalten, sodass möglicherweise body oder bOdY angezeigt werden.
Wenn daher XML über die XMLHttpRequest__-Technologie vom Server in ein HTML-Dokument geladen wird, bleibt der Knotenname erhalten.

NodeName und __tagName__ sind für Elemente gleich.
Aber das Attribut nodeName existiert auch in Nicht-Element-Knoten und hat in diesen Knoten einen besonderen Wert:

alert(document.nodeName) // #document
Die meisten Knotentypen haben kein tagName-Attribut und der tagName von Annotationsknoten im IE lautet !.
Daher ist nodeName im Allgemeinen aussagekräftiger als tagName. Aber tagName ist wie eine vereinfachte Version, sodass Sie es verwenden können, wenn Sie nur mit Elementknoten arbeiten.

innerHTML

innerHTML ist Teil des HTML5-Standards, weitere Informationen finden Sie unter dem Link
Es ermöglicht den Textzugriff auf Knoteninhalte. Das folgende Beispiel gibt den gesamten Inhalt von document.body aus und ersetzt ihn durch den neuen Inhalt.

Code kopieren Der Code lautet wie folgt:

Der Absatz

Und ein div

<script><br> Alert( document.body.innerHTML ) // Aktuelle Inhalte lesen<br> Document.body.innerHTML = 'Yaaahooo!' // Inhalte ersetzen<br> </script>

innerHTML enthält gültiges HTML. Aber Browser können auch fehlerhaftes HTML analysieren.
innerHTML kann in jedem Elementknoten verwendet werden. Es ist sehr, sehr nützlich.

innerHTML pitFalls

innerHTML ist nicht so einfach, wie es aussieht. Es gibt einige Fallen, die auf Neulinge warten, und manchmal können selbst erfahrene Programmierer ihnen nicht ausweichen.

Das innerHTML des __table__-Knotens im IE ist schreibgeschützt
Im IE ist innerHTML in COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR und anderen Elementen schreibgeschützt.
Mit Ausnahme von TD sind alle innerHTML-Tags im Tabellen-Tag im IE schreibgeschützt.

innerHTML kann nicht angehängt werden
Der Zusammensetzung der Anweisung nach zu urteilen, kann innerHTML Anhängeoperationen ausführen, wie zum Beispiel:

chatDiv.innerHTML = "

Hallo !

"
chatDiv.innerHTML = „Wie geht es dir?“
Aber was ist eigentlich passiert:

1. Alter Inhalt wird gelöscht

2. Der neue Inhalt wird analysiert und eingefügt. Der Inhalt wird nicht angehängt, sondern neu generiert.

Daher werden alle Bilder und anderen Ressourcen nach dem =-Vorgang neu geladen, einschließlich smile.gif.

Glücklicherweise gibt es andere Möglichkeiten, Inhalte zu aktualisieren, die kein innerHTML verwenden und daher nicht die oben genannten Probleme aufweisen.

nodeValue

innerHTML ist nur für Elementknoten gültig.
Für andere Knotentypen verwenden sie das Attribut „nodeValue“, um Inhalte abzurufen. Das folgende Beispiel zeigt, wie es bei Textknoten und Kommentarknoten funktioniert.

Code kopieren Der Code lautet wie folgt:

Der Text

<script><br> for(var i=0; i<document.body.childNodes.length; i ) {<br> Alert(document.body.childNodes[i].nodeValue)<br> }<br> </script>

Dans l'exemple ci-dessus, certains avertissements sont vides en raison de nœuds vides. Notez que nodeValue === null pour les nœuds SCRIPT. C'est parce que SCRIPT est un nœud d'élément. Pour les nœuds d'éléments, utilisez innerHTML.

Résumé

Type de nœud
 Type de nœud. La chose la plus importante est que le nœud d'élément soit 1, le nœud de texte soit 3 et qu'il soit en lecture seule.
nodeName/tagName
  Le nom de l'étiquette en lettres majuscules. Pour les nœuds non-élémentaires, nodeName aura également une valeur spéciale, qui est en lecture seule.
intérieurHTML
 Le contenu du nœud de l'élément, accessible en écriture.
nodeValue
 Le contenu du nœud de texte, accessible en écriture.
Les nœuds DOM ont d'autres attributs selon leur type. Par exemple, la balise INPUT a les attributs value et __checked__. Les attributs A ont href et ainsi de suite.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.