DEV Community
·
JavaScript中的DOM和BOM是什么？
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
BOM（浏览器对象模型）是浏览器提供的对象，允许与浏览器窗口及网页外部交互，包括窗口、导航器、位置和历史等组件。DOM（文档对象模型）则表示网页结构，支持JavaScript动态操作HTML元素。两者共同促进现代网页的交互性和动态内容。
🎯
关键要点
- BOM（浏览器对象模型）是浏览器提供的对象，允许与浏览器窗口及网页外部交互。
- window是全局对象，存储全局变量和函数。
- BOM的组件包括window、navigator、location、history、screen等。
- BOM的用例包括动态浏览器控制、URL操作、浏览器和设备信息获取、屏幕和分辨率访问、会话历史导航、Cookie管理和事件处理。
- DOM（文档对象模型）是表示网页结构的编程接口，支持动态操作HTML元素。
- DOM的树结构由文档节点、元素节点、文本节点、属性节点和注释节点组成。
- 常用的DOM方法包括选择元素、改变内容、修改属性、改变样式和添加/移除元素。
- DOM事件允许JavaScript响应用户操作，增强网页交互性。
- DOM连接HTML/CSS与JavaScript，是现代交互式网站的重要组成部分。
❓
延伸问答
BOM和DOM有什么区别？
BOM用于与浏览器窗口及外部交互，而DOM表示网页结构，支持动态操作HTML元素。
BOM的主要组件有哪些？
BOM的主要组件包括window、navigator、location、history和screen等。
如何使用DOM选择和修改网页元素？
可以使用document.getElementById、document.querySelector等方法选择元素，并通过innerHTML、setAttribute等方法修改内容和属性。
BOM的用例有哪些？
BOM的用例包括动态浏览器控制、URL操作、获取浏览器信息、访问屏幕属性和管理会话历史等。
DOM事件如何增强网页交互性？
DOM事件允许JavaScript响应用户操作，例如通过addEventListener方法处理按钮点击事件。
如何使用BOM获取浏览器信息？
可以通过navigator对象获取浏览器信息，例如使用navigator.userAgent获取用户代理字符串。
➡️
