HTML-Ereignisattribute
Globale Ereignisattribute: HTML 4 fügt die Möglichkeit hinzu, Ereignisse Aktionen im Browser auslösen zu lassen, z. B. das Starten von JavaScript, wenn der Benutzer auf ein Element klickt .
a. Fensterereignisattribut, für Ereignisse, die durch das Fensterobjekt ausgelöst werden (auf das
-Tag angewendet), ist das häufig verwendete Attribut „onload“.b. Formularereignis, ein Ereignis, das durch Aktionen innerhalb eines HTML-Formulars ausgelöst wird (wird auf fast alle HTML-Elemente angewendet, wird jedoch am häufigsten in Formularelementen verwendet): Häufig verwendete Ereignisse sind „onblur“, „onfocus“, „onselect“ und „onsubmit“.
c. Tastaturereignis
d. Mausereignis, ein durch Maus oder ähnliche Benutzeraktionen ausgelöstes Ereignis: häufig verwendete Ereignisse sind „onclick“, „onmouseover“ und „onmouseout“.
e. Medienereignis, ein durch Medien ausgelöstes Ereignis (z. B. Video, Bild und Audio) (gilt für alle HTML-Elemente, findet sich jedoch häufig in Medienelementen wie
HTML-Tags dynamisch erstellen
a. Zwei traditionelle Methoden
document.write-Methode und innerHTML-Attribut, keines davon Die Methoden und vom standardisierten DOM (W3C-Standard) unterstützte Attribute sind allesamt exklusive Attribute von HTML.
Mit der Methode document.write können Element-Tags, insbesondere Zeichenfolgen, problemlos eingefügt werden. Dies widerspricht jedoch dem Grundsatz, dass Webdesign Verhalten (Skript) und Struktur (HTML-Tags) trennen sollte.
<!DOCTYPE html>
<html>
<head>
<meta chaset="utf-8" />
<title>document.write</title>
<body>
<script>
<!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
document.write("<p>This is inserted by document.write</p>");
</script>
</body>
</head>
</html>innerHTML eignet sich zum Einfügen eines großen Teils von HTML-Inhalten in eine Webseite, wie zum Beispiel:
<p id="testp">
</p>
window.onload = function() {
var testp = document.getElementById("testp");
testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
}b. Verfeinerte Dom-Methode – Dom-Knotenbaum abrufen und Dom-Knotenbaum ändern
Knoten (Elemente) abrufen: document.getElementById und element.getElementsByTagName
Knoten erstellen (Element): document.createElement, document.createTextNode
Knoten anhängen (Element): element.appendChild
Einfügen (einen Knoten vor einem anderen Knoten einfügen): parentEelement.insertBefore( newElement , targetElement)
Sehr nützliche Attribute: element.parentNode (übergeordneten Knoten abrufen), element.nextSibling (geschwisterlichen Knoten abrufen)
Der Effekt des Einfügens von HTML mithilfe des oben genannten innerHTML-Attributs kann kann weiterhin mit der Dom-Methode verwendet werden. Implementierung:
window.onload = function() {
var testp = document.getElementById("testp");
var para = document.createElement("p");
testp.appendChild(para);
var context1 = doument.createTextNode("This is inserted by ");
para.appendChild(context1);
var emphasis = document.createElement("em");
para.appendChild(emphasis);
var context2 = document.createTextNode("method of domcore");
emphasis.appendChild(context2);
}Verwenden Sie die obige Dom-Methode, um eine Funktion zu schreiben, die einen Knoten in einen anderen Knoten einfügt:
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
targetElement.inserBefore(newElement, targetElement.nextSibling);
}
}Das obige ist der detaillierte Inhalt vonZusammenfassung von Methodenbeispielen zum dynamischen Erstellen von HTML-Tags in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
