Dieser Artikel beschreibt die Verwendung von JavaScript für Webseitenknoten. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
1. Grundkonzepte
Dieser Teil heißt "HTML DOM". Das sogenannte HTML-DOM ist die Webseite Laderegeln, eine Regel, die die grundlegende Formel für Webseiten ist.
Das heißt, alle Webseiten müssen gemäß den Regeln von: <html> <body> </body> </html> ... geschrieben und auch nach solchen Regeln geladen werden.
Der sogenannte "Web-Page-Knoten" ist auch eine beliebte Erklärung von "Dom-Knoten". Beispielsweise ist der Inhalt unter dem HTML -Knoten der gesamte Inhalt zwischen <html> </html> und der Inhalt unter dem Körperknoten ist der gesamte Inhalt zwischen <body> </body>.
HTML DOM stipuliert wie folgt: 1. Das gesamte Dokument ist ein Dokumentknoten; 2. Jedes HTML -Tag (Bedeutung <body> <table> und andere HTML -Tags anstelle eines einfachen <html> -Tags) ist ein Elementknoten; 3. Der im HTML -Element enthaltene Text ist ein Textknoten; 4. Jedes HTML -Attribut ist ein Attributknoten
Sie können beispielsweise eine Seite in den folgenden DOM -Knotenbaum zeichnen:
Die offizielle Definition von HTML DOM lautet wie folgt: HTML DOM ist die Abkürzung des HTML -Dokumentobjektmodells, und HTML DOM ist ein Dokumentobjektmodell, das speziell auf HTML/XHTML angewendet wird. Personen, die mit der Softwareentwicklung vertraut sind, können HTML DOM als Webseiten -API verstehen. Es behandelt jedes Element auf der Webseite als Objekte, damit die Elemente auf der Webseite auch von Computersprache erhalten oder bearbeitet werden können. Beispielsweise kann JavaScript HTML DOM verwenden, um Webseiten dynamisch zu ändern.
Durch die Verwendung von JavaScript kann die Addition, Löschung, Änderung und Suche nach Webseitenknoten für diese Dom -Knoten problemlos steuern.
2. Grundziele
Verwenden Sie JavaScript, um die Knoten der Webseiten hinzuzufügen, zu löschen, zu ändern und zu überprüfen. In einer Webseite:
1. Die Schaltfläche "Knoten hinzufügen", während Sie Knotenoptionen im Dropdown-Menü hinzufügen, das der Schaltfläche "Ersetzen" zugeordnet ist. Wenn auf der Webseite 9 Knoten vorhanden sind, sind keine Hinzufügen und Pop-up-Warnung zulässig.
2. Die Schaltfläche "den letzten Knoten löschen" und reduziert die Knotenoptionen im Dropdown-Menü, das der Schaltfläche "Ersetzen" zugeordnet ist.
3. Die Schaltfläche "Knoteninhalt ersetzen", wählen Sie zuerst den zu bedienenden Knoten aus und geben Sie dann den zu ersetzenden Inhalt ein, und der entsprechende Knoten wird ersetzt.
V.
3. Produktionsprozess
Schreiben Sie ohne Konfiguration einer Umgebung den folgenden Code auf die Webseite. Der spezifische Code lautet wie folgt, und das Folgende wird teilweise erklärt:
Kopieren Sie den Code-Code wie folgt: <! DocType html public "-// w3c // pd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
var i = 0;
Funktion createNode () {
if (i <9) {
i ++;
var option = document.createelement ("Option");
Option.Value = i;
option.innerhtml = "node" + i.toString ();
document.getElementById ("Nummer"). appendChild (Option);
var p = document.createelement ("p");
P.InnerHtml = "Knoten" + i.toString ();
document.getElementById ("d"). appendChild (p);
} anders
Alarm ("Mir geht es gut, es gibt zu viele Knoten, ich kann es nicht tun ~");
}
Funktion removenode () {
if (i> 0) {
ich--;
var s = document.getElementById ("number");
S.Removechild (S. Lastchild);
var d = document.getElementById ("D");
D.Removechild (D. Lastchild);
} anders
alarm ("keine Knoten, ein Garn löschen ~");
/*var ps = D.GetElementsByTagName ("P");*//
/*document.getElementById("d").Removechild(ps -9]); */
}
Funktion ersetzt () {
if (i> 0) {
var d = document.getElementById ("D");
var p = document.createelement ("p");
P.Innerhtml = document.getElementById ("Text"). Wert;
var ps = D.GetElementsByTagName ("P")
D.Replacechild (P, PS [document.getElementById ("Nummer"). Wert - 1]);
} anders
alarm ("kein Knoten, Garn ersetzen");
}
</script>
</head>
<body>
<input type = "button" value = "node erstellen" onclick = "createNode ()" />
<input type = "button" value = "Löschen Sie den letzten Knoten" onclick = "removenode ()" />
<select id = "number"> </select>
<Eingabe type = "text" id = "text" />
<input type = "button" value = "Ersatzinstallation" onclick = "ersetzerode ()" />
<div id = "d">
</div>
</body>
</html>
1. <Body> Knoten
Kopieren Sie den Code wie folgt: <Body>
<!-Button X2, beide Schaltflächen haben Onclick-Aktionen, die auf die entsprechende Funktion zeigen->
<input type = "button" value = "node erstellen" onclick = "createNode ()" />
<input type = "button" value = "Löschen Sie den letzten Knoten" onclick = "removenode ()" />
<!-Ein Dropdown-Menü ohne <option> untergeordnete Knoten wird gleichzeitig vom Knoten createNode () hinzugefügt. ->
<select id = "number"> </select>
<!-Eingabefeld X1, achten Sie auf die Einstellung der ID, ersetzt (), um den Wert dieses Textfelds zu erhalten->
<Eingabe type = "text" id = "text" />
<!-Taste x1, genau wie Taste x2->
<input type = "button" value = "Ersatzinstallation" onclick = "ersetzerode ()" />
<!-Eine leere Schicht mit nichts, da der übergeordnete Knoten von <p> alle Kinder dieses <div> -Knotens hinzugefügt werden
<div id = "d">
</div>
</body>
2. <Head> Knoten
Kopieren Sie den Code wie folgt: <kopf>
<!-Der von Webseiten verwendete Codierung und Titel ist nicht wichtig. Der Schlüssel ist der folgende JS-Skriptteil->
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
/*Zeichnet die globalen Variablen dessen, wie viele Knoten es auf der aktuellen Webseite gibt*/aufgezeichnet
var i = 0;
/*Es gibt 3 Funktionen unten. Wenn die Schaltfläche klickt, heißt sie*/
Funktion createNode () {
/*Wenn auf der Webseite weniger als 9 Knoten vorhanden sind, funktioniert es, sonst Popup-Fenster*/
if (i <9) {
/*Fügen Sie einen weiteren Knoten für jeden Datensatz hinzu. Die globale Variable i+1*//////
i ++;
/*Erstellen Sie einen Optionsknoten, und dann ist der Zeigername auch Option*/
var option = document.createelement ("Option");
/*Deklare das Wertattribut des erstellten Optionsknotens ist der aktuelle Wert von I, dh wenn i = 1 untergeordnete Knoten wie <Optionswert = 1> </Option> gibt. */
/*Einige Webseiten sagen, dass die Verwendung der Methode setAtTribute () zum Festlegen von Attributen, aber persönlich übt wird, ist es nicht einfach zu verwenden*/
Option.Value = i;
/*Legen Sie den Text unterhalb des Optionsknotens fest. Nach dieser Anweisung wird der untergeordnete Knoten <Optionswert = 1> Knoten1 </option>*/
option.innerhtml = "node" + i.toString ();
/*<Select> Die ID des übergeordneten Knotens ist eine Nummer. Diese Anweisung erfordert, dass der <optionswert = 1> Node1 </Option>*/dem übergeordneten Knoten im <Select> </select> zum übergeordneten Knoten hinzugefügt wird
document.getElementById ("Nummer"). appendChild (Option);
/*Das Prinzip ist das gleiche wie oben. Fügen Sie den <p> untergeordneten Knoten unter dem übergeordneten Knoten <Div> hinzu, und der Textwert unter dem untergeordneten Knoten ist Node1*/
var p = document.createelement ("p");
P.InnerHtml = "Knoten" + i.toString ();
document.getElementById ("d"). appendChild (p);
} anders
Alarm ("Mir geht es gut, es gibt zu viele Knoten, ich kann es nicht tun ~");
}
Funktion removenode () {
/*Wenn es auf der Webseite mehr als 0 Knoten gibt, gibt es Knoten, und dann ist nur das Popup-Fenster
if (i> 0) {
/*Für jede Knotenreduktion wird die globale Variable I-1 der aktuellen Webseite aufgezeichnet.
ich--;
/*Zeiger S auf den übergeordneten Knoten von <auswählungen>*/Definieren
var s = document.getElementById ("number");
/*Löschen Sie den letzten untergeordneten Knoten unter dem übergeordneten Knoten von <Select>, dh <option>. Wenn Sie den ersten löschen möchten, wird der Parameter zum ersten Mal*/
S.Removechild (S. Lastchild);
/*Löschen Sie den gleichen Prinzip wie oben, löschen
var d = document.getElementById ("D");
D.Removechild (D. Lastchild);
/*Wenn Sie das 8. <p> unter <div> löschen möchten, tun Sie bitte wie folgt*/
/*ps ist ein Zeiger auf den <p> untergeordneten Knotenssatz*/
/*var ps = D.GetElementsByTagName ("P");*//
/*document.getElementById("d").Removechild(ps -9]); */
} anders
alarm ("keine Knoten, ein Garn löschen ~");
}
Funktion ersetzt () {
/*Wenn es auf der Webseite mehr als 0 Knoten gibt, gibt es Knoten, und dann ist nur das Popup-Fenster
if (i> 0) {
/*Zeiger auf den übergeordneten Knoten d*/definieren
var d = document.getElementById ("D");
/*Erstellen Sie einen <p> </p> Knoten*/
var p = document.createelement ("p");
/*Holen Sie sich den in das Textfeld eingegebenen Inhalt und legen Sie ihn in den Knoten <p> </p>*///////////
P.Innerhtml = document.getElementById ("Text"). Wert;
/*ps ist ein Zeiger auf den <p> untergeordneten Knotensatz und die unter dem <div> übergeordnete Knoten*/
var ps = D.GetElementsByTagName ("P")
/*Lassen Sie den Knoten, den Sie gerade erstellt haben, den N -ten unter <ptes unter <div> ersetzen, wobei n nun der Wert -1 ist. Der Grund für -1 ist, dass die Anzahl des Kinderknotens und die Gruppe der Kinder von 0 beginnt, während unsere menschliche Anzahl von 1. */ beginnt. */
D.Replacechild (P, PS [document.getElementById ("Nummer"). Wert - 1]);
} anders
alarm ("kein Knoten, Garn ersetzen");
}
</script>
</head>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.