DEV Community
·
JavaScript HTML 文档对象模型
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了DOM（文档对象模型），使静态网页动态化。通过JavaScript，开发者可以实时创建、删除或更新HTML元素。DOM方法和属性用于操作网页元素，事件及事件监听器使网页响应用户交互。
🎯
关键要点
- DOM（文档对象模型）使静态网页动态化。
- 开发者可以通过JavaScript实时创建、删除或更新HTML元素。
- DOM将HTML元素构建为对象树，所有HTML元素在DOM中被定义为对象。
- 访问HTML网页的对象需要首先访问文档对象。
- DOM方法是操作，DOM属性是值。
- HTML事件是网页可以响应的事件，事件监听器是JavaScript处理这些事件的方式。
- addEventListener()方法用于将事件处理程序附加到指定元素。
❓
延伸问答
什么是DOM，它的作用是什么？
DOM（文档对象模型）是HTML文档的结构化表示，使静态网页动态化，允许开发者实时创建、删除或更新HTML元素。
如何通过JavaScript访问和操作DOM元素？
可以使用document.getElementById(id)访问元素，使用element.innerHTML更改内容，使用document.createElement()创建新元素，使用document.removeChild()删除元素，使用document.appendChild()添加元素。
DOM方法和属性有什么区别？
DOM方法是执行操作的函数，而DOM属性是描述对象状态的值，例如element.innerText是属性，element.setAttribute()是方法。
什么是HTML事件和事件监听器？
HTML事件是网页可以响应的行为，事件监听器是JavaScript处理这些事件的方式，使用addEventListener()方法将事件处理程序附加到指定元素。
如何使用addEventListener()方法？
addEventListener()方法的语法是element.addEventListener(event, function, useCapture)，用于将事件处理程序附加到指定元素。
DOM如何将HTML元素构建为对象树？
在DOM中，所有HTML元素被定义为对象，并以树状结构组织，形成一个包含所有网页元素的对象树。
➡️
