Nach dem Verständnis der Frameworks und Knoten von DOM (Textobjektmodell) ist das Wichtigste, diese Knoten zu verwenden, um HTML -Webseiten zu verarbeiten
Für einen DOM -Knotenknoten gibt es eine Reihe von Eigenschaften und Methoden. Am folgenden Tabelle sind häufig verwendet.
Verbessert: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Zugangsknoten
BOM bietet einige Grenzmethoden zum Zugriff auf Knoten. Häufig verwendete GetElementsByTagName () und GetelementById ()
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
Funktions searchdom () {
var oli = document.getElementsByTagName ("li");
var j = oli.length;
var j2 = oli [5] .Tagname;
var j3 = oli [0] .Childnodes [0] .nodeValue;
document.write (j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<body>
<Body Onload = "Searchdom ()">
<div id- "in"> </div>
<ul> Kundensprache
<li> html </li>
<li> JavaScript </li>
<li> CSS </li>
</ul>
<ul> Server -Seitensprache
<li> ASP.NET </li>
<li> jsp </li>
<li> Php </li>
</ul>
</body>
document.getElementById ()
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
Funktion findid () {
var j4 = oli2.tagname;
document.write (j4);
}
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
}
</script>
<li id = "inn"> php </li>
Die Codekopie lautet wie folgt:
<html>
<body id = "myid">
<div> </div>
<script type = "text/javaScript">
x = document.getElementsByTagName ('div') [0];
document.write ("div CSS -Klasse:" + X.ClassName);
document.write ("<br />");
document.write ("ein alternativer Weg:");
document.write (document.getElementById ('myid'). classname);
</script>
</body>
</html>
// id klassenname bekommen
2. Knotentyp erkennen
Der Knotentyp kann über den Nodetyp des Knotens erkannt werden, und ein Parameter gibt 12 Ganzzahlwerte zurück.
Expressionsformat wie document.nodetype
Was sehr nützlich ist, sind die drei Typen, die von den Modellknoten im DOM -Modell (i) genannt werden
Elementknoten, Textknoten und Attributknoten
1. Der Elementknoten gibt den Wert des Elementknotens zurück
2. Der Attributknoten gibt den Wert des Attributknotens zurück. 2 ist 2
3. Textknoten Rückgabewert ist 3
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
Funktion findid () {
var j5 = oli2.nodetyp;
document.write ("nodetype:" + j5 + "<br>");
}
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
}
</script>
<li id = "inn"> css </li>
Rückkehr: Nodetyp: 1
Dies bedeutet, dass ein Knoten separat verarbeitet werden kann, was bei der Suche nach Knoten sehr praktisch ist. Es wird später besprochen.
3. Verwenden Sie die Beziehung zwischen Vater Sohn und Süß, um Knoten zu finden
Verwenden Sie im ersten Abschnitt -Zugriffsknoten das Childnodes -Attribut des Knotens, um auf den im Elementknoten enthaltenen Textknoten zuzugreifen.
In diesem Abschnitt wird die Beziehung zwischen Vater und Sohn-Brother von Knoten verwendet, um Knoten zu finden
*Verwenden Sie die HaSchildnodes und Childnodes -Attribute, um alle in diesem Knoten enthaltenen Knoten zu erhalten
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<script Language = "JavaScript">
window.onload = function myDomisspector () {
var Oul = document.getElementById ("myList"); // Holen Sie sich das <ul> Tag
var domstring = "";
if (Oul.haschildnodes ()) {// Beurteilen Sie, ob es Kinderknoten gibt
var och = Oul.childnodes;
für (var i = 0; i <och.length; i ++) // Suchen Sie nach eins nach eins
Domstring + = och [i] .nodename + "<br>";
}
document.write (domstring);
}
</script>
</head>
<body>
<ul id = "myList">
<li> süße und saure Rippen </li>
<li> gedämpftes Schweinefleisch in Käfig </li>
<li> Kimchi Fish </li>
<li> Kastanienbratenhähnchen </li>
<li> Mapo Tofu </li>
</ul>
</body>
4.Dom bekommt den übergeordneten Knoten des Knotens
Die Codekopie lautet wie folgt:
<script Language = "JavaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood");
document.write (food.parentnode.tagname)
}
</script>
</head>
<body>
<ul>
<li> süße und saure Rippen </li>
<li> gedämpftes Schweinefleisch in Käfig </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Kastanienbratenhähnchen </li>
<li> Mapo Tofu </li>
</ul>
// kehre zu UL zurück
Mit dem übergeordneten Knoten wurde der übergeordnete Knoten des angegebenen Knotens erfolgreich erhalten
5. Verwenden Sie die Eigenschaft über die Eigenschaft
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<script Language = "JavaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood");
var parentelm = food.parentnode;
while (parentelm.className! = "farbenfroh" && parentelm! = document.body)
parentelm = parentelm.Parentnode; // Sehen Sie den ganzen Weg nach oben nach
document.write ("tageName:"+parentelm.tagname+"<br>");
document.write ("claaname:"+parentelm.className+"<br>");
document.write ("typeof:"+typeof (food)+"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<spann>
<li> süße und saure Rippen </li>
<li> gedämpftes Schweinefleisch in Käfig </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Kastanienbratenhähnchen </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body> <br> // output <br> // tagaName: div <br> claaname: farbenfroh <br> Typeof: Objekt
Beginnen Sie mit einem untergeordneten Knoten und suchen Sie nach dem übergeordneten Knoten nach oben, bis der Klassenname des Knotens "farbenfroh" ist
6. Brotherschaft von 6.Dom
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<script Language = "JavaScript">
window.onload = function () {
var foods = document.getElementById ("mydarfood");
var nextf = foods.nextsibling;
alert ("Nextsibling:" +Nextf.tagname +"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<spann>
<li> süße und saure Rippen </li>
<li> gedämpftes Schweinefleisch in Käfig </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Kastanienbratenhähnchen </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body>
Es sieht toll aus, mit Nextsibling- und Vorgängereigenschaften auf Geschwisterknoten zuzugreifen.
Aber es funktioniert nur für den IE -Browser
Um eine gute Kompatibilität mit dem Code zu haben, muss Nodetype verwendet werden, um das Urteil zu fällen
Das Folgende ist die Kompatibilität:
Die Codekopie lautet wie folgt:
<kopf>
<title> Geschwister </title>
<script Language = "JavaScript">
Funktion Nextsib (Knoten) {
var templast = node.parentnode.lastchild;
// Beurteilen Sie, ob es der letzte Knoten ist, wenn ja, null zurückkehren
if (node == templast)
null zurückkehren;
var tempobj = node.nextsibling;
// Suchen Sie nach den nachfolgenden Bruderknoten nacheinander, bis der Elementknoten gefunden wurde
while (tempobj.nodetype! = 1 && tempobj.nextsibling! = null)
tempoBj = tempobj.nextsibling;
// Drei-Punkte-Operator, wenn es sich um einen Elementknoten handelt, gibt er den Knoten selbst zurück, andernfalls gibt er NULL zurück
return (tempobj.nodetype == 1)? tempobj: null;
}
Funktion prevsib (Knoten) {
var tempfirst = node.parentnode.Firstchild;
// Beurteilen Sie, ob es der erste Knoten ist, wenn ja, null zurückkehren
if (node == tempfirst)
null zurückkehren;
var tempobj = node. -preveioussibling;
// Suchen Sie nach den vorherigen Bruderknoten nacheinander, bis der Elementknoten gefunden wurde
while (tempobj.nodetype! = 1 && tempobj.previoussibling! = null)
tempoBj = tempobj. -previoussibling;
return (tempobj.nodetype == 1)? tempobj: null;
}
Funktion myDomisspector () {
var myitem = document.getElementById ("mydearfood");
// Holen Sie sich den nächsten Element Bruderknoten
var NextListItem = Nextsib (MyItem);
// Holen Sie sich den vorherigen Element Bruder Knoten
var PrelistItem = PrevSIB (MyItem);
alert ("Letzter Element:" + ((NextListItem!
}
</script>
</head>
<Body Onload = "myDomisspector ()">
<ul>
<li> süße und saure Rippen </li>
<li> gedämpftes Schweinefleisch in Käfig </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Kastanienbratenhähnchen </li>
<li> Mapo Tofu </li>
</ul>
</body>
7. Setzen Sie Knoteneigenschaften
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<script Language = "JavaScript">
window.onload = function () {
// Bilder bekommen
var imgdatabe = document.getElementsByTagName ("img") [0];
// Erhalten Sie das Titelattribut des Bildes
imgdatabe.setAttribute ("src", "02.gif");
imgdatabe.setattribute ("Titel", "Friendly Slope");
document.write (imgdatabe.getAttribute ("title"));
document.write (imgdatabe.getAttribute ("Alt"));
document.write (imgDatabe.getAttribute ("Knotendaten"));
document.write (imgdatabe.getAttribute ("node_data"));
}
</script>
</head>
<body>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
Verwenden Sie die Methode SetAtTribute (), um Knotenattribute festzulegen
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script Language = "JavaScript">
window.onload = function () {
var bkk = document.getElementById ("new5");
var ClickBK = document.getElementById ("qiehuan");
clickBk.onclick = dsqiehuan;
Funktion dsqiehuan () {
BKK.SetatTribute ("Klasse", "xxx")
}
}
</script>
<Styles>
.xxx {color: #ddd}
</style>
</head>
<body>
<div id = "new5">
555
</div>
<em id = "qiehuan"> Switch </em>
</body>
8. Createelement () Knoten erstellen
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script Language = "JavaScript">
window.onload = function () {
var op = document.createelement ("p");
var otext = document.createTextNode ("Knoten mit DOM erstellen");
var otext1 = document.createTextNode ("Knoten 123 mit DOM erstellen");
Op.AppendChild (otext);
Op.AppendChild (otext1);
document.body.Appendchild (op);
}
</script>
</head>
<body>
<p> Es gab ursprünglich ein p hier, test createLement () </p>
</body>
9.Removechild entfernt den Knoten
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script Language = "JavaScript">
window.onload = function () {
var op = document.getElementsByTagName ("p") [0];
op.parentnode.removechild (op); // Das Ende ist .removechild (op), nicht .removechild ("op")
}
</script>
</head>
<body>
<p> Es gab ursprünglich ein p hier, test createLement () </p>
</body>
10.InsertbeFore () Einfügen vor einem bestimmten Knoten ein
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script Language = "JavaScript">
window.onload = function () {
var opold = document.getElementsByTagName ("p") [0];
var opnew = document.createelement ("p");
var otext = document.createTextNode ("neuer Knoten")
OpNew.AppendChild (otext);
opold.parentnode.insertbefore (opNew, open); // Empfangen Sie zwei Parameter, einer ist der neue Parameter und der andere ist der alte Knotenparameter
}
</script>
</head>
<body>
<p> Es gab ursprünglich ein p </p>
</body>
11. Neue Elemente nach einem bestimmten Knoten einfügen (hinzugefügt am 9. Januar 2015)
Die von DOM bereitgestellten Methoden können nur neue Elemente vor dem Zielelement mit InsertBefore () hinzufügen oder die Methode appendChild () verwenden, um neue Elemente am Ende der Childnodes des übergeordneten Elements hinzuzufügen (Beispiel: Adresse).
In der Praxis wird es häufig verwendet, um neue Elemente am Ende eines bestimmten Elements hinzuzufügen. Die DOM -Methode verfügt nicht über die Methode InsertBefore (), die Verwendung vorhandener Kenntnisse kann jedoch zum Schreiben verwendet werden.
Die Codeidee lautet wie folgt
Die Codekopie lautet wie folgt:
Funktion InsertAfter (NewElement, Ziele) {
var outdoor = targetElement.parentnode; // Finden Sie das übergeordnete Element des Zielelements
if (adarent.lastchild == targetElement) // Wenn das Ziel das letzte Element ist
Outdoor.AppendChild (NewLeement); // direkt zum letzten Element hinzufügen
sonst //, bevor Sie den übergeordneten Elementknoten des nächsten Elements einfügen
Outdoor.Insertbefore (NewLeement, TargetElement.Nextsibling)
Beispiel: (außerhalb des Elements anhängen) Originalinstanz: Adresse
Die Codekopie lautet wie folgt:
<kopf>
<meta charset = "utf-8">
<title> </title>
</head>
<body onload = "interp ()">
<p> First </p>
<p id = "target"> zweiter </p>
<script type = "text/javaScript">
Funktion InsertAfter (NewElement, Ziele) {
var outdoor = targetElement.parentnode; // Finden Sie das übergeordnete Element des Zielelements
if (adarent.lastchild == targetElement) // Wenn das Ziel das letzte Element ist
Outdoor.AppendChild (NewLeement); // direkt zum letzten Element hinzufügen
sonst //, bevor Sie den übergeordneten Elementknoten des nächsten Elements einfügen
Outdoor.Insertbefore (NewLeement, TargetElement.Nextsibling)
}
Funktion interp () {
var ooparent = document.getElementById ("Ziel");
var ooonewp = document.createelement ("a");
oonewp.setattribute ("href", "http://www.qq.com");
var ootextp = document.createTextNode ("link");
oonewp.AppendChild (ooetextP);
InsertAfter (ooonewp, ooparent);
}
</script>
</body>
Beispiel: Im Element hinzugefügt
12. Dokumentfragmentierung hinzufügen, um die Ausführungseffizienz zu verbessern
Die Codekopie lautet wie folgt:
<kopf>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script Language = "JavaScript">
window.onload = function () {
var opold = document.getElementsByTagName ("p") [0];
var acolors = ["rot", "grün", "blau", "magenta", "gelb", "schokoladen", "schwarz", "aquamarine", "lime", "fuchsia", "messing", "azure", "braun", " Bronze "," Deeppink "," Aliceblue "," Gray "," Kupfer "," Koralle "," Feldspat "," Orange "," Orchid "," Pink "," Plum "," Quarz "," lila "];
var Ofgragment = document.createdocumentFragment (); // Dokumentfragmentierung erstellen
für (var i = 0; i <acolors.length; i ++) {
var op = document.createelement ("p");
var otext = document.createTextNode (acolors [i]);
Op.AppendChild (otext);
Ofgragment.AppendChild (op); // Fügen Sie zuerst Knoten zu Fragmenten hinzu
}
//document.body.appendchild(ofragment); // schließlich zur Seite hinzugefügt
opold.parentnode.insertbefore (optimal, open); // kombiniert mit InsertBefore, um dem Knoten Dokumentfragmente hinzuzufügen
}
</script>
</head>
<body>
<p> Es gab ursprünglich ein p </p>
</body>