1.Dom: Dokumentobjektmodell DOM (Dokumentobjektmodell) definiert Standardmethoden zum Zugriff auf und zum Verarbeitung von HTML -Dokumenten. DOM rendert HTML -Dokumente als Baumstruktur (Knotenbaum) mit Elementen, Attributen und Text.
2. Einige häufig verwendete Eigenschaften von DOM
2.1 Elemente durch ID erhalten
(1) Syntax:
Die Codekopie lautet wie folgt:
document.getElementById ("id");
(2) Funktion: ID bezieht sich auf die ID -Karte einer Person. Wir können das Tag finden, indem wir nach der Tag -ID suchen und dann entsprechende Vorgänge ausführen.
(3) Hinweis: Vergessen Sie nicht, ein Dokument zu schreiben!
2.2 Innerhtml -Attribute
(1) Syntax:
Die Codekopie lautet wie folgt:
Obge.innerhtml = "Hallo Welt"
(2) Funktion: hauptsächlich, um den Inhalt im Tag zu erhalten oder zu ersetzen
(3) Beispiel:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Innerhtml </title>
</head>
<body>
<H2 id = "con"> JavaScript </h2>
<p> JavaScript ist eine einfache Skriptsprache, die auf Objekt und Ereignis basiert. Es ist in HTML -Dokumente eingebettet und wird vom Browser interpretiert und ausgeführt, wodurch ein dynamischer Anzeigeeffekt auf der Webseite erstellt und Benutzerinteraktionsfunktionen implementiert werden. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("con");
document.write ("Original -Titel:"+mychar.innerhtml+"<br>"); // Ausgabe des ursprünglichen H2 -Tag -Inhalts ausgeben
mychar.innerhtml = "Hallo Welt!";
document.write ("modifizierter Titel:"+mychar.innerhtml); // Ausgabe des geänderten H2 -Tag -Inhalts ausgeben
</script>
</body>
</html>
(4) HINWEIS: Objekt ist das erhaltene Elementobjekt, wie das über Dokument erhaltene Element.GetElementById ("ID").
2.3 HTML -Stil ändern
(1) Syntax:
Die Codekopie lautet wie folgt:
Object.Style.Property
(2) Funktion: Wird verwendet, um den HTML -Stil zu ändern
(3) Beispiel:
Die Codekopie lautet wie folgt:
<body>
<H2 id = "con"> Ich liebe JavaScript </H2>
<p> JavaScript ermöglicht Webseiten, dynamische Effekte anzuzeigen und Benutzerinteraktionsfunktionen implementieren. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("con");
mychar.style.color = "rot";
mychar.style.backgroundcolor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) HINWEIS: Die Eigenschaft hat viele Stile wie Farbe, Höhe usw., die mit dieser Methode geändert werden können. Vergessen Sie nicht, die Eigenschaften nach ihnen ein Semikolon hinzuzufügen.
2.4 Zeigen und ausblenden (Attribut anzeigen)
(1) Syntax:
Object.Style.Display = Wert
(2) Funktion: Anzeige und Versteck werden häufig auf Webseiten angezeigt, die mithilfe des Anzeigeattributs erreicht werden.
(3) Beispiel:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
Funktion HidDentext ()
{
var mychar = document.getElementById ("con");
mychar.Style.display = "Keine";
}
FunktionshowText ()
{
var mychar = document.getElementById ("con");
mychar.style.display = "block";
}
</script>
(4) HINWEIS: Der Wertwert ist keiner und Block, bei dem keine nicht angezeigt wird und der Block angezeigt wird.
2.5 Klassenname -Attribut
(1) Syntax:
Die Codekopie lautet wie folgt:
Object.className = className
(2) Funktion: 1. Nehmen Sie das Klassenattribut des Elements; 2. Geben Sie einen CSS -Stil für ein Element auf der Webseite an, um das Erscheinungsbild des Elements zu ändern.
(3) Beispiel:
Die Codekopie lautet wie folgt:
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = gb2312">
<title> ClassName Attribut </title>
<Styles>
Körper {Schriftgröße: 16px;}
.eins{
Grenze: 1PX Solid #eee;
Breite: 230px;
Höhe: 50px;
Hintergrund: #CCC;
Farbe: Rot;
}
.zwei{
Grenze: 1PX Solid #CCC;
Breite: 230px;
Höhe: 50px;
Hintergrund:#9CF;
Farbe: Blau;
}
</style>
</head>
<body>
<p id = "p1"> JavaScript ermöglicht Webseiten, dynamische Effekte anzuzeigen und Benutzerinteraktionsfunktionen implementieren. </p>
<input type = "button" value = "style add style" onclick = "add ()"/>
<p id = "p2"> JavaScript ermöglicht Webseiten, dynamische Effekte anzuzeigen und Benutzerinteraktionsfunktionen implementieren. </p>
<Eingabe type = "Button" value = "Erscheinungsbild ändern" onclick = "modify ()"/>
<script type = "text/javaScript">
Funktion add () {
var p1 = document.getElementById ("p1");
p1.classname = "eins";
}
Funktion modify () {
var p2 = document.getElementById ("p2");
p2.classname = "zwei";
}
</script>
</body>
Das obige dreht sich alles um diesen Artikel, ich hoffe es gefällt euch.