Heim > Artikel > Web-Frontend > Was ist JavaScript-HTML-DOM?
Was ist JavaScript-HTML-DOM?
- 黄舟Original
- 2017-08-04 10:28:441269Durchsuche
Was ist JavaScript-HTML-DOM?
Das HTML-DOM bietet Zugriff auf alle Elemente eines JavaScript-HTML-Dokuments.
HTML DOM (Document Object Model)
Wenn eine Webseite geladen wird, erstellt der Browser das Document Object Model der Seite.
Durch das programmierbare Objektmodell erhält JavaScript ausreichend Leistung, um dynamisches HTML zu erstellen.
EmpfohlenJavaScript-TutorialLernkurs
1.JavaScript HTML
HTML DOM ermöglicht JavaScript, den Inhalt von HTML-Elementen zu ändern.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>Kurslink: http://www.php.cn/code/3743.html
2. JavaScript HTML DOM – CSS ändern
Es gibt 4 Möglichkeiten, CSS in JavaScript zu ändern:
Knotenstil ändern (Inline-Stil);
Knotenklasse oder -ID ändern;
Neues CSS schreiben;
Ersetzen Sie das Stylesheet auf der Seite.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1 id="id1">我的标题 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点我!</button> </body> </html>
Kurslink: http://www.php.cn/code/3748.html
3. JavaScript-HTML-DOM-Ereignisse
HTML-DOM gibt JavaScript die Möglichkeit, auf HTML-Ereignisse zu reagieren.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Kurslink: http://www.php.cn/code/3752.html
4.JavaScript HTML DOM EventListener
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5; var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>Kurslink: http://www.php.cn/code/3755.html
5. JavaScript-HTML-DOM-Elemente
Um ein neues Element zum HTML-DOM hinzuzufügen, müssen Sie zuerst das Element (Elementknoten) erstellen und es dann an ein vorhandenes Element anhängen.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>Kurslink: http://www.php.cn/code/3757.html
Das obige ist der detaillierte Inhalt vonWas ist JavaScript-HTML-DOM?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!