Was ist Dom? DOM ist eine Reihe von API -Schnittstellen, die auf der Browser -Programmierung basieren (in diesem Tutorial kann es als DHTML -Programmierung bezeichnet werden). W3C hat einige subtile Unterschiede in jedem Browser. Unter ihnen ist Mozillas Browser dem Standard am ähnlichsten. Einfache JavaScript muss DOM kombinieren, um die DHTML -Programmierung durchzuführen, und können schöne Effekte erzeugen und auf das Web angewendet werden. Dies ist fast das gleiche wie bei anderen Sprachen, ebenso wie C/C ++ Bibliotheksunterstützung erfordert. Ansonsten ist es einfach eine grammatikalische Forschung. Wir sind am meisten besorgt, dass DOM Webseiten mit Skripten und anderen Programmiersprachen verbindet. DOM gehört zum Browser, nicht zum in der JavaScript -Sprachspezifikation angegebenen Kerninhalt.
Elemente finden
1. Suchen Sie direkt
| Methodenname | beschreiben |
| GetElementById (ID) (Dokument) | Holen Sie sich Elemente im Dokument mit einem angegebenen eindeutigen ID -Attributwert |
| GetElementsByTagName_R (Name) | Gibt eine Reihe von untergeordneten Elementen mit dem angegebenen TagName im aktuellen Element zurück |
| document.getElements byclassName | Holen Sie sich die Tag -Sammlung basierend auf Attributen |
| GetAttribute (Name) | Gibt den Attributwert des Elements zurück. Das Attribut wird namentlich angegeben |
1> document.getElementById ('id')
<body> <div id = "zhang"> nicht gutaussehend </div> <script type = "text/javaScript"> var i = document.getElementById ('Zhang'); // Die angegebene ID id i.inNerText = 'sehr gutaussehend' finden; // InnerText ändern die angegebene Zeichenfolge </script> </body>Display -Effekt, wenn wir dh öffnen, wird er so modifiziert, dass er sehr gut aussehend ist.
2> GetElementsByTagName_R (Name)
<body> <div name = "zhang"> nicht gutaussehend </div> <script type = "text/javaScript"> var i = document.getElementByTagnmae ('Zhang'); // den angegebenen Namensname i.inNertext = 'sehr gutaussehend' finden; // InnerText ändern die angegebene Zeichenfolge </script> </body>Der gleiche Anzeigeeffekt
3> document.GetElements byClassName
<body> <div> Nicht gut aussehend </div> <script type = "text/javaScript"> var i = document.getElementClassName ('Zhang'); // den angegebenen Klassennamen I.InNerText = 'sehr gutaussehend' finden; // InnerText ändern die angegebene Zeichenfolge </script> </body>2. Indirekte Suche
| Attributname | beschreiben |
| Kinder | Gibt eine Reihe aller untergeordneten Elemente des aktuellen Elements zurück |
| Kinder | Gibt alle Kinderelemente des aktuellen Elements zurück |
| FirstChild | Gibt das erste niedrigere untergeordnete Element des aktuellen Elements zurück |
| lastChild | Gibt das letzte untergeordnete Element des aktuellen Elements zurück |
| Nextsibling | Gibt das Element unmittelbar nach dem aktuellen Element zurück |
| Voreingenommener | Gibt das Element unmittelbar vor dem aktuellen Element zurück |
| Parentelement | Gibt sein übergeordnetes Knotenbezeichnungselement zurück |
| Kinder | Geben Sie alle Untertitel zurück |
| FirstElementChild | Gibt das erste Untertitelelement zurück |
| LastElementChild | Gibt das letzte Subtag -Element zurück |
| NextElementtsibling | Kehren Sie下一个兄弟标签元素zurück |
| Vorheriges Gesischen | Kehren Sie zum vorherigen Geschwister -Tagelement zurück |
Mit W3C DOM können Sie einfache Cross-Browser-Skripte schreiben und die Leistung und Flexibilität von XML in vollem Umfang nutzen, um XML als Kommunikationsmedium zwischen dem Browser und dem Server zu verwenden.
Betriebselemente
1. W3C DOM -Eigenschaften und -Methoden, mit denen Inhalte dynamisch erstellt werden
| Eigenschaften/Methoden | beschreiben |
| document.createelement_x (tagname) | Die Methode createLement_x im Dokumentobjekt kann Elemente erstellen, die von Tagname angegeben werden. Wenn der String Div als Methodeparameter verwendet wird, wird ein Div -Element erstellt |
| document.createTextNode (Text) | Die CreateTEXTNode -Methode des Dokumentobjekts erstellt einen Knoten, der statischen Text enthält. |
| <element> .Appendchild (Childnode) | Die Appendchild -Methode fügt den angegebenen Knoten zur Liste der untergeordneten Knoten des aktuellen Elements (als neuer untergeordneter Knoten) hinzu. |
| <element> .SetatTribute (Name, Wert) | Diese Methoden erhalten und setzen den Wert des Namensattributs im Element |
| <element> .InsertBefore (newnode, targetnode) | Fügen Sie den Knoten -Newnode als untergeordneter Knoten des aktuellen Elements vor dem Zielnode -Element ein |
| <element> .removeAttribute (Name) | Diese Methode löscht den Attributnamen aus dem Element |
| <element> .removechild (Childnode) | Diese Methode entfernt untergeordnetes Element Childnode aus dem Element |
| <element> .Replacechild (NewNode, Oldnode) | Diese Methode ersetzt den Knoten -Oldnode durch den Knoten -Newnode |
| <element> .haschildnodes () | Diese Methode gibt einen booleschen Wert zurück, der angibt, ob das Element unter Kinderelemente verfügt |
2. Tag -Inhalt
InnerText erhalten Sie den Tag -Text -Inhalt Innerhtml Erhalten Sie den HTML -Inhaltswert den Wert, dh den Wert des Formulars eingereichtes Formular
Das heißt, Folgendes ist Folgendes:
<div> 1111 </div> <div> 2222 </div> <Eingabe type = "text" value = "zhang yanlin"> <script> document.getElementsByClassName ("Zhang"). Innertext = 123; // das Tag mit dem Klassennamen Zhang abrufen und den Inhalt in 123 Dokument ändern. // Erhalten Sie das Tag mit dem Klassennamen Yan und ändern Sie den Inhalt in 456 document. // Erhalten Sie das Tag mit dem Klassennamen Lin und ändern Sie den Inhalt in Zhang Yanlin. Dies ist schön </script>3. Attribute
Attribute // Alle Tag -Attribute abrufen setAttribute (Schlüssel, Wert) // Das Tag -Attribut GetAttribute (Schlüssel) // das angegebene Tag -Attribut abrufen
Durch benutzerdefinierte Eigenschaften können Sie einen Fall für die Auswahl aller, die Auswahl und das Deaktivieren vornehmen. Der Code ist wie folgt:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <Eingabetyp "Eingabetyp" -Taste "value =" Wählen Sie alle "onclick =" checkAll (); value = "unect" onclick = "recvall ();"> </div> <div id = "i1"> <ul> <li> <Eingabe type = "Checkbox" value = "1"> Basketball </li> <li> <Eingabe type = "chroubbox" value = "2"> football </li> <li> <li> </uca -type = "value". CheckAll () {var b = document.getElements byclassName ("c1"); für (var i = 0; i <B.Length; i ++) {var check = b [i]; check.Checked = true}} Funktion cancleAll () {var b = document.getElementsByClassName ("c1"); für (var i = 0; i <var i = 0; i <B.Length; i ++) {var check = b [i]; check.Checked = false}} function recvall () {var b = document.getElementsByClassName ("c1"); für (var i = 0; i <B.Length; i ++) {var check = b [i]; if (check.Checked) {check.Checked = false} else {check.Checked = true}}} </script> </body> </html> Wählen Sie alle, umgekehrte, Abbrechen Fälle abbrechenHinweis: Onclick ist ein Klickereignis, das später erwähnt wird
4. Klassenbetrieb
className // Alle Klassennamen classlist.remove (cls) erhalten // Löschen Sie die angegebene Klasse classlist.add (cls) // Klasse hinzufügen
Dieses Ding ist sehr nützlich. Wenn beispielsweise in JD.com unsere Maus auf alle Produkte platziert wird, erscheinen viele Produkte unten. Die Produkte sind versteckt und erscheinen erst nach dem Auslöserereignis, ein CSS -verstecktes Attribut zu definieren. Nachdem die Maus angelegt wurde, wird das CSS -versteckte Attribut entfernt. Die Maus wird entfernt und das versteckte Attribut hinzugefügt.
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> hide </title> <style> .hide {display: keine; · document.getElementById ("Zhangyanlin"). classlist.remove ("hide"); } function mouout () {document.getElementById ("Zhangyanlin"). classlist.add ("hide"); } </script> </body> </html> lass uns das Gehirn mit einem Fall aufwecken5. Tag Operation
Wir können Tags über DOM erstellen und zum angegebenen Ort hinzufügen. Hier sind zwei Methoden zum Betrieb von Tags
// Methode eins var zhang = "<Eingabe type = 'text' />";xxx.insertadjacenthtml("beforeend",zang);xxx.insertadjacentelement('afterBegin'.document tag = document.createelement ('div') xxx.appendChild (Tag) // Fügen Sie ein DIV -Element xxx.insertbefore (Tag, xxx [1]) // In die angegebene Position einfügen, Sie können den Index verwenden <! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <Eingabe type = "text"/> <Eingabe type = "button /> </div> <div style = "Position: relativ;"> <ul id = "commentLt"> <li> Alex </li> <li> Eric </li> </ul> </div> </div> <script> Funktion addElement (ths) {// den Eingabwert var val = ths.previousementSibling.Value; ths. -previousElementssibling.Value = ""; var commentIlLt = document.getElementById ('commentheLSt'); // Die erste Form, String -Methode // var str = "<li>" + val + "</li>"; // 'vorabgin', 'AfterBegin', 'Vorher', 'Afters' // Voran interner letztes // vorabgin externer obere // AFTINE INTERNETE INTERNETE // AFTERETENE EXTERNAL-MALL-PASSION //COMMENTILIST.INERTADJACENTHTML("BEFOREEND",str); // Die zweite Methode ist die Elementmethode var Tag = document.createelement ('li'); Tag.InnerText = val; var temp = document.createelement ('a'); temp.Innertext = 'baidu'; temp.href = "http://etiantian.org"; Tag.AppendChild (temp); // commentheLt.appendChild (Tag); commentLt.insertBefore (Tag, commentheT.Children [1]); } </script> </body> </html> fügen Sie Tag -Operation -Fall hinzu6. Stilbetrieb
<Body> <div id = i1> Zhang Yanlin ist gutaussehend </div> <script> var obj = document.getElementById ('i1'); obj.style.fontsize = "32px"; obj.style.backgroundcolor = "Red"; </script> </body> </body>Die Effekte sind wie folgt:
Nehmen wir einen Fall. Nur die Wissenspunkte zu betrachten, ist langweilig. Wir sehen oft die dunklere Schriftart im Eingabefeld, die Sie auffordern, etwas einzugeben. Wenn Sie einklicken, verschwindet es. Es ist eine magische Operation. Es wird durch die DOM erreicht. Lesen Sie einfach den Code, ohne viel Unsinn zu sagen.
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> title </title> <style> .bb {color: #9a9a9a; } .aa {color: schwarz; } </style> </head> <body> <Eingabewert = "Bitte geben Sie den Inhalt ein" onfocus = "inpatu (this);" Onblur = "OnBtu (this);"> <Script> Funktion inpatu (ths) {ths.className = "aa"; var text = ths.value; if (text == "Bitte geben Sie Inhalte ein") {ths.value = ""; }} Funktion onBtu (ths) {var text = ths.value; if (text == "Inhalt eingeben" || text.trim (). Länge == 0) {ths.className = "bb"; ths.value = "Bitte Inhalt eingeben"; }} </script> </body> </html> Eingabefeld Eingabeaufforderung7. Positionsbetrieb
Gesamtdokumenthöhe Dokument.DocumentElement.OffsTheight Current Current Dokument Einnahmen Bildschirmhöhe Dokument.DocumentElement
Haben Sie gedacht, dass es in der unteren rechten Ecke der Webseite nach oben nach oben zurückkehrt und dann an einem geringsten Punkt nach oben zurückkehrt? Ja, es soll diese Höhen berechnen; Und wenn Sie die Maus herunterziehen, ändert sich der entsprechende Stil der Menüleiste links.
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <titels> </title> </head> <style> body {margin: 0px; } img {Border: 0; } ul {padding: 0; Rand: 0; Listenstil: Keine; } h1 {padding: 0; Rand: 0; } .clearFix: After {Inhalt: "."; Anzeige: Block; Höhe: 0; klar: beides; Sichtbarkeit: versteckt; } .wrap {width: 980px; Rand: 0 Auto; } .pg-Header {Hintergrundfarbe: #303A40; -Webkit-Box-Shadow: 0 2px 5px RGBA (0,0,0, .2); -moz-box-shadow: 0 2px 5px rgba (0,0,0, .2); Box-Shadow: 0 2px 5px RGBA (0,0,0, .2); } .pg-Header .Logo {float: links; Polsterung: 5px 10px 5px 0px; } .pg-Header .Logo img {Vertical-Align: Middle; Breite: 110px; Höhe: 40px; } .pg-Header .nav {Zeilenhöhe: 50px; } .pg-Header .nav ul li {float: links; } .pg-Header .nav ul li a {display: block; Farbe: #CCC; Polsterung: 0 20px; Textdekoration: Keine; Schriftgröße: 14px; } .pg-Header .nav ul li a: hover {color: #fff; Hintergrundfarbe: #425A66; } .pg-body {} .pg-body .catalog {Position: absolut; Oben: 60px; Breite: 200px; Hintergrundfarbe: #fafafa; unten: 0px; } .pg-body .catalog.fixed {Position: behoben; Top: 10px; } .pg-body .catalog .catalog-item.active {color: #fff; Hintergrundfarbe: #425A66; } .pg-body .Content {Position: absolut; Oben: 60px; Breite: 700px; Rand-Links: 210px; Hintergrundfarbe: #fafafa; Überlauf: Auto; } .pg-body .Content .Sektion {Höhe: 500px; Grenze: 1px solide Rot; } </style> <body OnScroll = "Scrollevent ();"> <div> <div> <div> <a href = "#"> <img src = "http://core.pc.lietou-static.com/revs/images/common/Logo_7012C4a4.pn"> </<ul <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <oul> <uls href="#">Home</a> </li> <li> <a href="#">Function 1</a> </li> <li> <a href="#">Function 2</a> </li> </ul> </div> </div> </div></div><div> <div> <div id="catalog"> <div auto-to="function1"><a>Picture 1 </a> </div> <div auto-to = "function2"> <a> bild 2 </a> </div> <div auto-to = "function3"> <a> Bild 3 </a> </div> </div> <div id = "content"> <div mus Menü <div -Menü = "function3"> <h1> Kapitel 3 </h1> </div> </div> </div> </script> <Script> Funktion Scrollevent () {var bodyscrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsByCassName ('Catalog') [0] .ClassList.add ('behoben'); } else {document.getElementsByClassName ('Catalog') [0] .ClassList.remove ('behoben'); } var content = document.getElementById ('content'); var §s = content.children; für (var i = 0; i <abschnitts.length; i ++) {var curr Current_section = ältes [i]; // Die absolute Höhe des aktuellen Etiketts aus dem oberen Var Scofftop = current_section.offsettop + 60; // das aktuelle Etikett von oben, die relative Höhe var offtop = SCOFFTOP - BODYSCROLLTOP; // Die aktuelle Etikettenhöhe var hohe = current_section.scrollHeight; if (offtop <0 && -Offtop <Höhe) {// Das aktuelle Etikett fügt aktiv // eine andere Entfernung von aktiven var mseus = document.getElementById ('Katalog'). Kinder; var current_menu = Menüs [i]; current_menu.classlist.add ('active'); für (var j = 0; j <meenus.length; j ++) {if (Menüs [j] == current_menu) {} else {Menüs [j] .ClassList.remove ('active'); } } brechen; }}}} </script> </body> </html> Bildlaufmenü <! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> title </title> <style> .pg-top {Position: behoben; Hintergrundfarbe: #0095BB; Höhe: 40px; Breite: 40px; unten: 50px; Rechts: 40px; Farbe: Whitesmoke; } .hide {display: keine; } </style> </head> <body onScroll = "func ();"> <div style = "Höhe: 3000px;" id = "i1"> <h1> Zhang Yanlin </h1> </div> <div id = "i2"> <a href = "javaScript: void (0);" onclick = "gotop ();"> kehren Sie zu oben zurück </a> </div> <script> Funktion func () {var scrolltop = document.body.scrolltop; var i1 = document.getElementById ("i2"); if (scrolltop> 20) {i1.classlist.remove ("hide")} else {i1.classlist.add ("hide")}} Funktion gotop () {document.body.scrolltop = 0; } </script> </body> </html> Zurück nach oben8. Andere Operationen
Konsole.log-Ausgabefeld-Warn-Popup-Box Bestätigen Bestätigen Sie Bestätigungsbox // URL und Aktualisierungsposition.
Lassen Sie mich Ihnen von dem Timer erzählen. Timer ist nützlicher. Wenn wir beispielsweise eine E-Mail löschen, finden wir ein Gesprächspop-up. Die E -Mail wurde gelöscht. Dies ist ein einzelner Timer. Multiple Timer kann verwendet werden, wenn Sie spezifische Anforderungen haben.
// Multiple Timer Case <Eingabe type = "button" value = "intervall" onclick = "interval ();"> <Eingabe type = "button" value = "stopinterval" onclick = "stopinterval ();"> <script> Funktionsintervall () {s1 = setInterval (function () {console.log (123) // kontinuierliche Ausgabe 123}, 500); s1 = setInterval (function () {console.log (123)}, 500); } Funktion stopinterval () {ClearInterval (S1); // Einen mehreren Timer} </script> löschenSingle Timer
<Div> <Eingabe type = "button" value = "delete" onclick = "delete ();"> <Eingabe type = "button" value = "keal Der aktuelle Status" onclick = "undelete (); t1 = setTimeout (Clearstatus, 1500); } function clearStatus () {document.getElementById ("Status"). InnerText = ""; } function undelete () {ClearTimeout (t1); // Nach dem Löschen des Timers wird weiterhin} </script> angezeigtEreignis
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> // normaler Ereignis <button id = "btn1" onclick = "func (); Funktion func () {alert ("Normale Zeitverarbeitung")} </script> // Stufe 0 Verarbeitungsereignis <Schaltfläche id = "Btn2"> Stufe 0 Verarbeitungstaste </button> <script> var btn = document.getElementById ("Btn2"); btn.onclick = function () {alert ("0-Level-Verarbeitungstaste")}; // btn.onclick = null; // Ereignisverarbeitung löschen, werden mehrere Ereignisse überschrieben, so dass nur das letzte Ereignis </script> // Level 2 Verarbeitungsereignis <Button ID = "Btn3"> Stufe 2 Verarbeitungstaste </button> <script> var btn = document.getElementById ("Btn3"). var btn1 = document.getElementById ("Btn3"). AddEventListener ("Click", function () {alert ("Sekundärverarbeitung Ereignis 2")}); // nicht überschrieben </script> <button id = "btn4"> vollständige kompatible Schaltfläche </button> <script> var btn = document.getElementById ("Btn4"); if (btn.addeventListener) {btn.addeventListener ("click", Demo); } else if (btn.attachEvent) {btn.attachEvent ("Onclick", Demo); } else {btn.onclick = Demo; } function Demo () {alert ("Integrierte Kompatibilitätsereignishandling")} </script> </body> </html>Ereignisliste:
| Eigentum | Wann tritt dieses Ereignis auf (wann wird ausgelöst) |
| Onabort | Das Laden der Bild wird unterbrochen |
| Onblur | Das Element verliert den Fokus |
| aufchange | Der Inhalt des Gebiets wurde geändert |
| ONCLICK | Der Ereignisgriff aufgerufen, wenn der Benutzer auf ein Objekt klickt (Ausführen des obigen Codebeispiels beim Klicken auf das Eingabetag). |
| Ondblclick | Ereignisgriff aufgerufen, wenn der Benutzer ein Objekt doppelklickt |
| onError | Beim Laden eines Dokuments oder Bildes trat ein Fehler auf |
| Onfokus | Elemente gewinnen Fokus |
| Onkeydown | Eine Tastaturtaste wird gedrückt |
| Onkeypress | Eine Tastaturtaste wird gedrückt und freigegeben |
| Onkeyup | Eine Tastatur wird veröffentlicht |
| Onload | Eine Seite oder ein Bild ist geladen |
| OnmouseDown | Die Maustaste wird gedrückt |
| Onmousemove | Nachdem sich die Maus bewegt |
| Onmouseout | Maus wird aus einem Element entfernt |
| Onmouseover | Bewegen Sie die Maus über ein Element |
| OnmouseUp | Maustaste wird freigegeben |
| Onreset | Die Schaltfläche Reset wird geklickt |
| onresize | Das Fenster oder Rahmen wird geändert |
| OnSelect | Text ausgewählt |
| ONSUBMIT | Die Schaltfläche zur Bestätigung wird geklickt |
| Onunload | Benutzer -Beenden -Seite |
Hinweis: Ein Tag kann mehrere Ereignisse binden, dieses Tag wird derzeit betrieben und das Ereignis verkauft den Inhalt des aktuellen Ereignisses.
Lassen Sie uns ein paar Fälle haben, sonst habe ich das Gefühl, dass ich es nach dem Lesen nicht gesehen habe
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> title </title> <style> ul {Listenstil: Keine; Polsterung: 0; Rand: 0; } ul li {float: links; Hintergrundfarbe: #038cae; Farbe: weiß; Polsterung: 15px 20px; } .clearFix: After {display: block; Inhalt: '.'; Höhe: 0; Sichtbarkeit: versteckt; klar: beides; } .hide {display: keine; } .tab-menu {Border: 1px solide #dddddd; } .tab-menu .title {Hintergrund-Color: #dddddd; } .tab-menu .title .Active {Hintergrundfarbe: weiß; Farbe: Schwarz; Grenze: 2px fest Rot; } .tab-menu .Content {Border: 1px solide #dddddd; min-hohe: 150px; } </style> </head> <body> <div> <div> <ul> <li target = "h1" onclick = "show (this);"> Preistrends </li> <li target = "h2" onclick = "show (this); "Inhalt"> <div con = "h1"> content1 </div> <div con = "h2"> content2 </div> <div con = "h3"> content3 </div> </div> </div> </div> </div> </div> </div> </div> <script> function Show (ths) {var target = ths.getribute ('tarntar'; ths.className = 'active'; var brother = ths.Parentelement.Children; für (var i = 0; i <brother.length; i ++) {if (ths == brother [i]) {} else {brother [i] .removeTtribute ("Klasse"); }} var content = document.getElementById ("Inhalt"). Kinder; für (var j = 0; j <content.length; j ++) {var current_content = content [j]; var con = current_content.getAttribute ("con"); if (con == target) {current_content.classList.remove ("hide"); } else {current_content.className = "hide"; }}}} </script> </body> </html> Tag -Menühülle <! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> title </title> </head> <body> <Eingabe type = "button" onclick = "func ();" value = "klicken Sie me"/> <div id = "i1"> <div> 123 </div> <div Alex = "sb"> 123 </div> <div> 123 </div> <div Alex = "sb"> 123 </div> 123 </div> <!-<Eingabe type = "text">-> <!-<!-<!-<!-<!-<!-<!-<!-<! {// i1 // i1 Alle Kinder, jedes Kind, beurteilen Sie, ob Alex = 'SB' var i1 = document.getElementById ('i1'); var divs = i1.Children; für (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; var result = current_div.getAttribute ('Alex'); // console.log (Ergebnis); if (result == "sb") {current_div.inNertext = "456"; }}} </script> </body> </html> Elementwerte durch benutzerdefinierte Attribute ändernDer obige Artikel hat ein tiefes Verständnis von JavaScript -DOM -Objekten. Dieser Artikel ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.