DEV Community
·
什么是DOM和BOM？
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
JavaScript的HTML文档对象模型（DOM）和浏览器对象模型（BOM）是动态网页开发的基础。DOM将HTML文档表示为对象树，支持动态页面操作；BOM则提供对浏览器的访问，包括窗口和导航信息。两者结合可实现丰富的互动网页体验。
🎯
关键要点
- JavaScript是动态网页开发的基础，HTML文档对象模型（DOM）和浏览器对象模型（BOM）是其核心概念。
- DOM将HTML文档表示为对象树，支持动态页面操作。
- DOM树的根节点是文档对象，元素节点是HTML标签，文本节点是标签内的文本，属性节点与其元素相关联。
- DOM提供了丰富的方法来与对象树交互，包括访问、修改、创建、添加和删除元素。
- BOM提供对浏览器的访问，包括窗口、导航和屏幕信息。
- BOM的主要对象包括window、navigator、location、history和screen。
- DOM关注文档的结构，而BOM关注浏览器的环境，两者通过window.document对象相互关联。
- 结合DOM和BOM可以创建动态网页，例如根据用户的浏览器和屏幕大小进行问候。
- HTML DOM和BOM是JavaScript开发者工具包中的重要工具，能够实现丰富的互动网页体验。
❓
延伸问答
DOM和BOM的定义是什么？
DOM是HTML文档的对象模型，表示为对象树，支持动态操作；BOM是浏览器对象模型，提供对浏览器的访问。
如何使用DOM访问和修改网页元素？
可以使用document.getElementById()和document.querySelector()访问元素，使用innerHTML和textContent修改内容。
BOM提供了哪些主要对象？
BOM的主要对象包括window、navigator、location、history和screen。
DOM和BOM有什么区别？
DOM关注文档的结构，而BOM关注浏览器的环境，二者通过window.document对象相互关联。
如何结合DOM和BOM创建动态网页？
可以使用BOM获取浏览器信息，再用DOM更新页面内容，例如根据用户的浏览器类型和屏幕大小显示问候信息。
DOM树的结构是怎样的？
DOM树的根节点是文档对象，元素节点是HTML标签，文本节点是标签内的文本，属性节点与元素相关联。
➡️
