什麼是JavaScript HTML DOM?
透過 HTML DOM,可存取 JavaScript HTML 文件的所有元素。
HTML DOM (文檔物件模型)
當網頁被載入時,瀏覽器會建立頁面的文檔物件模型(Document Object Model)。
透過可程式化的物件模型,JavaScript 獲得了足夠的能力來建立動態的 HTML。
推薦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('id1').style.color='red'"> 点我!</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中文網其他相關文章!