JavaScript 中 DOM 和 BOM 的区分

什么是 DOM 和 BOM在 JavaScript 中DOM 和 BOM 是两个核心概念它们都与浏览器环境相关但功能和用途完全不同。DOM文档对象模型DOM全称Document Object Model即文档对象模型。它表示 HTML 或 XML 文档的结构化表示。主要特点将 HTML/XML 文档表示为树形结构每个标签、属性、文本都是树中的一个节点提供操作文档内容的 API常见用途获取页面元素document.getElementById()修改元素内容element.innerHTML添加/删除元素appendChild(),removeChild()修改样式element.style.color red示例代码// 获取元素consttitledocument.getElementById(title);// 修改内容title.textContent新的标题;// 添加新元素constnewDivdocument.createElement(div);newDiv.textContent我是新添加的div;document.body.appendChild(newDiv);BOM浏览器对象模型BOM全称Browser Object Model即浏览器对象模型。它表示浏览器窗口以及与浏览器交互的对象。主要特点以window对象为核心包含浏览器窗口、历史记录、位置信息等不同浏览器实现可能略有差异常见对象window浏览器窗口对象navigator浏览器信息locationURL 信息history浏览历史screen屏幕信息示例代码// 获取浏览器信息console.log(navigator.userAgent);// 获取当前 URLconsole.log(location.href);// 跳转到新页面location.hrefhttps://www.example.com;// 获取屏幕尺寸console.log(screen.width,screen.height);核心区别对比特性DOMBOM全称文档对象模型浏览器对象模型核心对象documentwindow作用范围文档内容浏览器窗口主要用途操作页面元素操作浏览器窗口实际应用场景DOM 应用场景动态更新页面内容根据用户操作更新显示表单验证检查用户输入交互效果点击、悬停等事件响应单页应用不刷新页面更新内容BOM 应用场景页面跳转location.href浏览器信息获取判断浏览器类型窗口控制打开新窗口、调整大小历史记录前进、后退操作总结简单来说DOM是操作页面内容的工具BOM是操作浏览器窗口的工具在实际开发中两者经常结合使用。例如通过 BOM 获取浏览器信息然后通过 DOM 根据这些信息调整页面显示。记住这个简单的区分DOM 管页面里有什么BOM 管浏览器怎么用。