Knotentyp
Nodetyp
Hier sind einige wichtige Nodetyp -Werte:
1: Elementelement
2: Attr
3: Texttext
8: Kommentare
9: Dokumentdokument
NodeName, NodeValue
Knotenbeziehung
Childnodes: Jeder Knoten hat eine Childnodes -Eigenschaft, die ein Nodelist -Objekt enthält
FirstChild: Äquivalent zu Childnodes [0]
LastChild: äquivalent zu Childnodes.length-1
Gleichzeitig können auf andere Knoten in derselben Liste zugegriffen werden, indem die Vorgänger- und Nextsibling -Eigenschaften jedes Knotens in der Liste verwendet werden.
Betriebsknoten
appendChild ()
Mit der Methode appendChild () wird ein Knoten zum Ende der Childnodes -Liste hinzugefügt. Nach dem Hinzufügen eines Knotens werden die Beziehungszeiger des neuen Knotens, des übergeordneten Knotens und des letzten Kinderknotens von Childnodes entsprechend aktualisiert.
InsertBefore ()
InsertBefore () -Methode akzeptiert zwei Parameter: der zu integrierte Knoten und der zu verwiesene Knoten.
// Nach der Insertion wird der letzte untergeordnete Knoten zurückgegeben.
ErsatzEchild ()
AustauschChild () akzeptiert zwei Parameter, der zugesetzte Knoten und der zu ersetzende Knoten
var returnedNode = somenode.replacechild (newnode, somenode.firstchild);
removechild ()
NUR ENTFORMEN UND NICHT ERSETZEN.
var ehemaligerFirstchild = somenode.removechild (Somenode.Firstchild);
Clonenode ()
Punkt 1
Punkt 2
Punkt 3
var DeepList = myList.clonenode (true); console.log (DeepList.length); // 3var slowlist = myList.clonenode (false); console.log (slowlist.childnodes.length); // 0
Dokumenttyp
Der Dokumentknoten hat die folgenden Eigenschaften:
Kinder des Dokuments
var html = document.documentElement; // einen Verweis auf <html> console.log (html === document.childnodes [0]); // TrueConsole.log (html === document.Firstchild); // WAHR
Informationen dokumentieren
// Erhalten Sie den Titel des Dokuments var originalTitle = document.title; // Setzen Sie das Dokumenttitel document.title = "Neues Seitentitel"; // Erhalten Sie die vollständige urlvar url = document.url; // den Domain -Namen var domain = document.domain; // Holen Sie sich das urlvar referrer = document.referrer; // Angenommen, die Seite stammt von p2p.wrox.com Domain domain.domain = "Wrox.com"; // erfolgreiches document.domain = "nczonline.net"; // Fehlgeschlagen
Rufen Sie document.getElementById ("myelement") an; Das Ergebnis gibt das unten gezeigte <eingabe> Element zurück.
Der beste Weg besteht darin, das Namensattribut des Formularfelds nicht mit der ID anderer Elemente zu machen.
<Eingabe type = "text" name = "myelement" value = "textfeld"> <div id = "myelement"> a div </div>
Spezielle Sammlung
Schreiben von Dokumenten
<html> <kopf> <titels> document.write () Beispiel 3 </title> </head> <body> <script type = "text/javaScript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>Zeichenfolgen <// script> werden nicht als geschlossene Tags für externe Skript -Tags angesehen, sodass auf der Seite keinen unnötigen Inhalt vorhanden ist.
Elementtyp
Der Elementknoten hat die folgenden Eigenschaften:
Um auf den Tag -Namen eines Elements zuzugreifen, können Sie das Attribut von KnodeName oder das Attribut von Tagname verwenden.
<div id = "mydiv"> </div> var div = document.getElementById ("mydiv"); console.log (div.tagname); // divconsole.log (div.nodename); // divif (element.tagname == "div") {// Sie können nicht so vergleichen. Es ist einfach, Fehler zu machen} if (element.tagname.tolowerCase == "div") {// Dies ist am besten (für jedes Dokument)}}}}}}}}}}}}}}}}Holen Sie sich Funktionen
Es gibt drei Hauptmethoden für Betriebsmerkmale, nämlich GetAtTribute (), setAttribute () und removeTtribute ();
Beachten Sie, dass der an GetAtTribute () übergebene Attributname dem tatsächlichen Attributnamen entspricht. Eindruck: Um den Attributwert der Klasse zu erhalten, sollten Sie in "Klasse" anstelle von "Klassenname" bestehen.
var div = document.getElementById ("mydiv"); console.log (div.getAttribute ("Klasse")); // BdElemente erstellen
Verwenden Sie die Methode document.createelement (), um ein neues Element zu erstellen.
Kinder des Elements
Vor der Ausführung einer Operation müssen Sie normalerweise zuerst die Nodetype -Eigenschaft überprüfen, wie im folgenden Beispiel gezeigt:
für (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodetype == 1) {// einige Operationen ausführen}}}Texttyp
Textknoten haben die folgenden Eigenschaften:
Erstellen Sie einen Textknoten
Sie können document.createTextNode () verwenden, um einen neuen Textknoten zu erstellen.
Normalisierte Textknoten
Normalisieren()
Teilen Sie Textknoten
Splittext ()
Kommentartyp
Der Kommentarknoten hat die folgenden Eigenschaften:
DOM -Betriebstechnologie
Betriebsformular
// TABLEVAR -Tabelle = document.createelement ("Tabelle"); Tabelle.border = 1; Tabelle.width = "100%"; // TBODYVAR TBODY = DOCUMENT.CREATELEMENT ("TBODY"); TABLE.AppendChild (tbody); // Erstellen Sie die erste Zeile erstellen tbody.insertrow (0); tbody.rows [0] .insertcell (0); 2,1 ")); // Erstellen Sie die zweite Zeile tbody.insertrow (01); tbody.rows [1] .insertcell (0); 1,2 ")); tbody.rows [1] .insertcell (1);Selektor -API
QuerySelector () Methode
// das Körperelement var tbody = document.querySelector ('body'); // das Element mit id "mydiv" var mydiv = document.querySelector ("#mydiv"); // das erste Element mit dem Erstklassen "ausgewählt" "Var Selected = document.QuerySelector (". "Ausgewählt"; // das erste Bild mit klassifizieren "button" button "button" erhalten ". document.body.querySelector ("img.button");QuerySelectorAll () -Methode
// Alle <em> Elemente in a <div> (ähnlich zu getElementsByTagName ("em") var ems = document.getElementById ("mydiv"). QuerySelektorall ("em"); // alle Elemente der Klasse "ausgewählt" ausgewählt. document.querySelectorAll ("p strong");HTML5
Klassenbezogene Erweiterungen
GetElementsByClassName () Methode:
Diese Methode kann über das Dokumentobjekt und alle HTML -Elemente aufgerufen werden.
// Erhalten Sie alle Elemente, die "Benutzername" und "aktuell" in der Klasse enthalten. Die Reihenfolge der Klassennamen spielt keine Rolle var AllCurrentusernames = document.
Fokusmanagement
HTML5 fügt auch die Funktion der Unterstützung bei der Verwaltung des DOM -Fokus hinzu. Das erste ist das Dokument. ActiveLeement -Eigenschaft, die sich immer auf das Element des DOM bezieht, das derzeit den Fokus gewonnen hat.
var button = document.getElementById ("myButton"); button.focus (); alert (document.activeLement === Taste); // WAHRWenn das Dokument gerade geladen ist, wird das Dokument standardmäßig im Dokument gespeichert. ActiveLeement unter Bezugnahme auf das Dokument.Body -Element. Während des Ladens des Dokuments ist der Wert des Dokuments. ActiveLeement ist null.
Darüber hinaus wurde die Methode des Dokuments.hasfocus () hinzugefügt, mit dem festgestellt wird, ob das Dokument den Fokus erlangt hat.
var button = document.getElementById ("myButton"); Botton.focus (); alert (document.hasfocus ()); // WAHR