Struktur- und Inhaltseigenschaften
Nodetyp
Alle Knoten haben Typen, und es gibt insgesamt 12 Arten von Knoten.
Die Codekopie 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 Elementknoten (1) und Textknoten (3). Der Rest wird selten verwendet.
Zum Beispiel können wir beim Auflisten aller untergeordneten Elementknoten darüber iterieren und Childnodes [i] .nodetype! = 1 zum Erkennen verwenden.
Hier ist der Implementierungscode:
Die Codekopie lautet wie folgt:
<body>
<Div> erlaubte Leser: </div>
<ul>
<li> John </li>
<li> Bob </li>
</ul>
<!-ein Kommentarknoten->
<Script>
var childnodes = document.body.childnodes
für (var i = 0; i <childnodes.length; i ++) {
if (Childnodes [i] .nodetype! = 1) Fortsetzung
Alarm (Childnodes [i])
}
</script>
</body>
*denken
Was wird die folgende Code -Eingabeaufforderung:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<body>
<Script>
alert (document.body.lastchild.nodetype)
</script>
</body>
</html>
KnodeName, Tagname
Sowohl der Knotenname als auch der TagName enthalten den Namen des Knotens.
Für Dokument.body
alarm (document.body.nodename) // Körper
Alle Knoten in HTML werden aktiviert.
Wenn der Knotenname nicht aktiviert wird
Diese Situation ist selten. Wenn Sie neugierig sind, können Sie Folgendes lesen.
Sie wissen wahrscheinlich bereits, dass es zwei Möglichkeiten für Browser gibt: HTML -Muster und __xml -Muster. Normalerweise wird ein HTML -Schema verwendet, aber wenn XMLHTTPREquest__ -Technologie verwendet wird, um XML -Dokumente zu erhalten, wird XML -Schema verwendet.
Das XML-Muster wird auch in Firefox verwendet, wenn der Inhaltstyp des XHTML-Dokuments auf XMLIS eingestellt ist.
Im __xml -Modus wird der Knotenname beibehalten, sodass Körper oder Körper auftreten können.
Wenn XML zu HTML -Dokument über XMLHTTPREquest__ -Technologie vom Server geladen wird, wird der Knotenname beibehalten.
NODEHAME und __TAGNAME__ sind für Elemente gleich.
Nicht-Element-Knoten haben jedoch auch Knotenname-Attribute, in denen sie spezielle Werte haben:
alert (document.nodename) // #document
Die meisten Knotentypen haben kein TagName -Attribut, und der TagName des Knotens ist in IE IS!
Im Allgemeinen ist Nodhename im Allgemeinen aussagekräftiger als Tagname. TagName ist jedoch wie eine vereinfachte Version. Wenn Sie also nur Elementknoten verarbeiten, können Sie sie verwenden.
Innerhtml
Innerhtml ist Teil des HTML5 -Standards. Weitere Informationen finden Sie im Link
Es ermöglicht den Zugriff auf Knoteninhalte im Text. Das folgende Beispiel gibt den gesamten Inhalt des Dokuments aus. Körper und ersetzen Sie sie durch den neuen Inhalt.
Die Codekopie lautet wie folgt:
<body>
<p> Der Absatz </p>
<div> und ein div </div>
<Script>
Alert (document.body.innerhtml) // Aktuelle Inhalt lesen
document.body.innerhtml = 'yaaahoo!' // Inhalt ersetzen
</script>
</body>
Innerhtml enthält eine effiziente HTML. Browser können aber auch deformierte HTML analysieren.
Innerhtml kann in jedem Elementknoten verwendet werden. Es ist sehr, sehr nützlich.
Innerhtml Fallstricke
Innerhtml ist nicht so einfach, wie es scheint. Es hat einige Fallstricke, die auf die Anfänger warten, und manchmal können erfahrene Programmierer es nicht vermeiden.
Die Innerhtml des __Table__-Knotens im IE ist nur schreibgeschützt
In IE ist Innerhtml in Col, Colgroup, Frameset, Head, HTML, Stil, Tisch, Tbody, Tfoot, Thead, Titel, TR und anderen Elementen schreibgeschützt.
In den Tabellen-Tags in IE ist die Innerhtml mit Ausnahme von TD schreibgeschützt.
Innerhtml kann nicht hinzugefügt werden
Aus der Struktur der Aussage kann InnerHTML Anhangvorgänge ausführen, z. B.:
chatdiv.innerhtml += "<div> hi <img src = 'lächeln.gif'/>! </div>"
chatdiv.innerhtml += "Wie geht es dir?"
Aber was tatsächlich getan wurde:
1. Der alte Inhalt wird gelöscht
2. Der neue Inhalt wird analysiert und eingefügt. Der Inhalt wurde nicht angehängt, er wurde regeneriert.
Daher werden alle Bilder und andere Ressourcen nach der += Operation, einschließlich Smile.gif, neu geladen.
Glücklicherweise gibt es andere Möglichkeiten, Inhalte zu aktualisieren, die Innerhtml nicht verwenden, sodass oben kein Problem erwähnt wird.
NodeValue
Innerhtml gilt nur für Elementknoten.
Für andere Arten von Knoten verwenden sie die NodeValue -Eigenschaft, um den Inhalt zu erhalten. Das folgende Beispiel veranschaulicht, wie es auf Textknoten und Kommentarknoten funktioniert.
Die Codekopie lautet wie folgt:
<body>
Der Text
<!-ein Kommentar->
<Script>
für (var i = 0; i <document.body.childnodes.length; i ++) {
Alert (Dokument.Body.Childnodes [i] .nodeValue)
}
</script>
</body>
Im obigen Beispiel sind einige Warnungen aufgrund leerer Knoten leer. Beachten Sie, dass NodeValue === NULL für Skriptknoten. Das liegt daran, dass das Skript ein Elementknoten ist. Elementknoten, verwenden Sie Innerhtml.
Zusammenfassen
Nodetyp
Knotentyp. Das Wichtigste ist, dass der Elementknoten 1 ist, der Textknoten 3 und schreibgeschützt ist.
NODEHAME/TALNAME
Caps -Tag -Name. Für Nicht-Element-Knoten hat Nodhename auch spezielle Werte, schreibgeschützte Werte.
Innerhtml
Der Inhalt des Elementknotens kann geschrieben werden.
NodeValue
Der Inhalt des Textknotens kann geschrieben werden.
Der DOM -Knoten hat einige andere Attribute entsprechend seinem Typ. Zum Beispiel hat das Eingabe -Tag Wert und __Checked__ -Attribute. Das A -Attribut hat href und so weiter.
Das obige dreht sich alles um diesen Artikel, ich hoffe es gefällt euch.