Was ist JavaScript-HTML-DOM?-js-Tutorial-php.cn

Was ist JavaScript-HTML-DOM?

黄舟

Freigeben： 2017-08-04 10:28:44

Original

1304 Leute haben es durchsucht

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.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!