html dom HTML DOM 教程

html dom

HTML DOM（文档对象模型）是一种用于表示 HTML 文档的标准对象模型。它定义了 HTML 文档的结构，以及如何与 HTML 文档进行交互。

HTML DOM 将 HTML 文档视为一个树形结构，其中包含文本、属性、元素和其他对象。它使用 JavaScript 对象来表示 HTML 元素，并使用 JavaScript 对象方法来处理 HTML 元素。

// 例子：使用 JavaScript 访问文档中的元素
var myElement = document.getElementById("myElement");  // 获取 id 为 "myElement" 的元素
myElement.innerHTML = "Hello World!";                  // 修改该元素的内容

HTML DOM 还定义了一些特定的事件，例如 onclick 事件、onmouseover 事件和 onkeypress 事件。这些特定的事件可以在用户与页面进行交互时捕获并处理。

// 例子：使用 JavaScript 处理 onclick 事件
function myFunction() {   // 定义函数 myFunction()  
    alert("Hello World!"); // 在单击时显示 "Hello World!"  
}  
document.getElementById("myButton").onclick = myFunction; // 给 id 为 "myButton" 的元素注册 onclick 事件处理函数 myFunction()  

HTML DOM 还包含一套样式 API，可用来动态地修改页面中的 CSS 样式。这样就可以在不重新加载页面的情况下动态地修改页面样式。

// 例子：使用 JavaScript 改变 CSS 样式  
document.getElementById("myDiv").style.backgroundColor = "#ff0000"; // 给 id 为 "myDiv" 的元素修改背景颜色   

HTML DOM 教程