Heim >Web-Frontend >js-Tutorial >Was ist JavaScript-HTML-DOM?

Was ist JavaScript-HTML-DOM?

黄舟Original: 2017-08-04 10:28:441348Durchsuche

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.

Was ist JavaScript-HTML-DOM?

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(&#39;id1&#39;).style.color=&#39;red&#39;">
点我!</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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der JavaScript-Array-OperationenNächster Artikel：Zusammenfassung der JavaScript-Array-Operationen

In Verbindung stehende Artikel

Mehr sehen