bom dom对比举例
时间: 2023-10-09 11:05:29 浏览: 48
BOM和DOM是两个不同的概念,它们分别代表浏览器对象模型和文档对象模型。BOM主要涉及浏览器窗口和浏览器的相关属性和方法,而DOM则涉及网页文档的结构和内容。
举个例子来对比BOM和DOM,假设我们要获取浏览器窗口的尺寸信息。在BOM中,我们可以使用window对象来获取窗口的尺寸信息,比如使用window.innerHeight和window.innerWidth来获取窗口的内部高度和宽度。而在DOM中,我们可以通过操作文档对象来获取网页元素的尺寸信息,比如使用document.documentElement.clientHeight和document.documentElement.clientWidth来获取文档元素的可见高度和宽度。
下面是一个示例代码,展示了如何使用BOM和DOM来获取窗口尺寸信息:
```javascript
// 使用BOM获取窗口尺寸信息
console.log(window.innerHeight); // 获取窗口的内部高度
console.log(window.innerWidth); // 获取窗口的内部宽度
console.log(window.outerHeight); // 获取窗口的外部高度(包括浏览器工具栏等)
console.log(window.outerWidth); // 获取窗口的外部宽度(包括浏览器工具栏等)
// 使用DOM获取文档元素尺寸信息
console.log(document.documentElement.clientHeight); // 获取文档元素的可见高度
console.log(document.documentElement.clientWidth); // 获取文档元素的可见宽度
```
通过以上代码,我们可以看到使用BOM的window对象和DOM的document对象来获取窗口和文档的尺寸信息的区别。