Vorwort: Wenn eine Webseite geladen wird, erstellt der Browser 1. JavaScript kann alle HTML-Elemente auf der Seite ändern1. HTML-Element anhand der ID findenSuchen Sie nach einem bestimmten HTML-Tag und ändern Sie es <Text> <div calss="001">Wer bin ich</div> <Skript> var x = document.getElementById("001"); x.innerHTML = „Ich bin ein tapferer Stier, der keine Angst vor Schwierigkeiten hat“; </Skript> </body> <Text> <p id="intro">Hallo Niu Niu!</p> <p>Dieses Beispiel demonstriert die Methode <b>getElementById</b>!</p> <Skript> x=document.getElementById("intro"); document.write("<p>Text aus Absatz mit ID intro: " + x.innerHTML + "</p>"); </Skript> </body> 2. HTML-Elemente anhand des Tag-Namens findenvar x = document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('Der erste Absatz im Element id="main" ist:' + y[0].innerHTML); Suchen Sie das Element mit //Die erste Möglichkeit, es zu schreiben var x = document.getElementById("main"); var y = x.getElementsByTagName("p")[0]; //Alle p-Tags in HTML suchen und den Inhalt des ersten Tags ersetzen var y = document.getElementsByTagName("p"); y[0].innerHTML = "Tapferer Stier, der keine Angst vor Schwierigkeiten hat" <Skript> var x = document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('Der erste Absatz im Element id="main" ist:' + y[0].innerHTML); </Skript> 3. Suchen Sie HTML-Elemente nach Klassennamen<Text> <p class="intro">Hallo Niu Niu!</p> <p>Dieses Beispiel demonstriert die Methode <b>getElementsByClassName</b>!</p> <Skript> x = document.getElementsByClassName("intro"); document.write("<p>Text aus dem Einführungsabsatz der Klasse: " + x[0].innerHTML + "</p>"); </Skript> </body> Ändern Sie den Elementinhalt solcher Tags: <Text> <p class="intro">Hallo Niu Niu!</p> <p>Dieses Beispiel demonstriert die Methode <b>getElementsByClassName</b>!</p> <Skript> x = document.getElementsByClassName("intro")[0]; x.innerHTML = "Tag-Inhalt ändern"; // document.write("<p>Text aus dem Einführungsabsatz der Klasse: " + x[0].innerHTML + "</p>"); </Skript> </body> 4. JavaScript kann alle HTML-Attribute auf der Seite ändernUm die Attribute eines HTML-Elements zu ändern, verwenden Sie diese Syntax: document.getElementById(id).attribute=neuer Attributwert <img id="image" src="smiley.gif" width="160" height="120"> <Skript> document.getElementById("Bild").src="Landschaft.jpg"; </Skript> <p>Das Originalbild ist smiley.gif, das Skript ändert das Bild in landscape.jpg</p> 5. JavaScript kann alle CSS-Stile auf der Seite ändern
Um den Stil eines HTML-Elements zu ändern, verwenden Sie diese Syntax: <!DOCTYPE html> <html> <Kopf> <meta charset="utf-8"> <title>Titel</title> </Kopf> <Text> <p id="p1">Hallo Welt!</p> <p id="p2">Hallo Welt!</p> <Skript> document.getElementById("p2").style.color="blau"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="größer"; </Skript> <p>Die obigen Absätze werden per Skript geändert. </p> </body> </html> 6. JavaScript kann auf alle Ereignisse auf der Seite reagierenHTML-DOM zum Versenden von Ereignissen:
<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8"> </Kopf> <Text> <p>Durch Klicken auf die Schaltfläche wird die Funktion <em>displayDate()</em> ausgeführt. </p> <button id="myBtn">Klick mich</button> <Skript> document.getElementById("myBtn").onclick=function(){ Anzeigedatum ()}; Funktion displayDate() { document.getElementById("demo").innerHTML=Datum(); } </Skript> <p id="demo"></p> </body> </html> wie folgt: Mit den Ereignissen onmouseover und onmouseout können Funktionen ausgelöst werden, wenn der Mauszeiger zu einem Element bewegt wird oder dieses verlässt. <!DOCTYPE html> <html><Kopf> <meta charset="utf-8"> </Kopf> <Text> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Maus über mich</div> <Skript> Funktion mOver(obj) { obj.innerHTML="Vielen Dank" } Funktion mOut(obj) { obj.innerHTML="Bewege die Maus über mich" } </Skript> </body> </html> Dies ist das Ende dieses Artikels über das JavaScript Document Object Model DOM. Weitere relevante Inhalte zum JavaScript Document Object Model finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Was ist die Funktion und Schreibreihenfolge der Pseudoklasse eines Tags?
>>: Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit
1. Rasterlayout (Raster): Es unterteilt die Webse...
Das MySQL auf einem Server im Computerraum lief e...
Hallo zusammen, ich bin Qiufeng. Vor Kurzem hat W...
1. Aktualisieren Sie die Yum-Quelle Die PostgreSQ...
Melden Sie sich zuerst bei MySQL an Shell> MyS...
Vorwort Im Internet gibt es häufig Artikel, die v...
1 Einleitung Kong ist kein einfaches Produkt. Das...
Was ist Redis Cluster? Redis Cluster ist eine von...
Was ist ELK? ELK ist ein vollständiger Satz von L...
Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...
Häufig ignorieren wir beim Erstellen der Homepage ...
Einführung In diesem Artikel stellen wir vor, wie...
1. Die Verwendung der oder Syntax in MySQL und di...
Inhaltsverzeichnis Einführung Wie sieht ein Itera...
Die MySQL-Transaktionsunterstützung ist nicht an ...