首頁 > 文章 > web前端 > 什麼是JavaScript HTML DOM？

什麼是JavaScript HTML DOM？

黄舟原創: 2017-08-04 10:28:441320瀏覽

透過 HTML DOM，可存取 JavaScript HTML 文件的所有元素。

HTML DOM (文檔物件模型)

當網頁被載入時，瀏覽器會建立頁面的文檔物件模型（Document Object Model）。

透過可程式化的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。

什麼是JavaScript HTML DOM？

推薦JavaScript教學學習課程

#1.JavaScript HTML

HTML DOM 讓JavaScript 改變HTML 元素的內容。

<!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>

課程連結：http://www.php.cn/code/3743.html

2.JavaScript HTML DOM - 改變CSS

#JavaScript修改CSS有4種方法：

修改節點style(內聯樣式);

改變節點class或id;

寫入新的css;

#取代頁面中的樣式表。

<!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>

課程連結：http://www.php.cn/code/3748.html

3.JavaScript HTML DOM 事件

#HTML DOM 讓JavaScript 有能力回應HTML 事件。

<!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>

課程連結：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>

課程連結：http://www.php.cn/code/3755.html

#5. JavaScript HTML DOM 元素

如需在HTML DOM 中新增元素，您必須先建立該元素（元素節點），然後將該元素追加到一個已存在的元素中。

<!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>

課程連結：http://www.php.cn/code/3757.html

以上是什麼是JavaScript HTML DOM？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript數組操作的總結下一篇：JavaScript數組操作的總結

看更多