【JavaScript源代码】JavaScript中BOM和DOM详解.docx

JavaScript中BOM和DOM详解 　　目录　　BOM（浏览器对象模型） 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法，封装工具 　　BOM（浏览器对象模型） 　　1. window 获取浏览器c窗口尺寸 2 JavaScript中的BOM（Browser Object Model，浏览器对象模型）和DOM（Document Object Model，文档对象模型）是两个核心概念，它们都是JavaScript与网页交互的关键部分。 **BOM（浏览器对象模型）** 1. **Window对象**：是BOM的核心，代表浏览器的窗口。它包含了全局变量和函数，例如`window.innerHeight`和`window.innerWidth`用于获取浏览器窗口的内部宽度和高度，不包括滚动条。在IE8及以下版本，可以使用`document.documentElement.clientHeight`和`document.documentElement.clientWidth`来获取相同信息。为了兼容不同浏览器，可以使用如下代码： ```javascript var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ``` 2. **Screen对象**：提供了关于用户屏幕的信息，如`screen.availWidth`和`screen.availHeight`分别表示可用屏幕宽度和高度，不包含任务栏等界面元素。 3. **窗口操作**：`window.open()`用于打开新窗口或标签，`window.close()`用于关闭已打开的窗口。例如： ```javascript var newWindows; function newWindow() { newWindows = window.open("https://www.baidu.com/", "baidu"); } function closeWindow() { newWindows.close(); } ``` 4. **浏览器事件**：包括`window.onload`（页面加载完成事件）、`window.onscroll`（页面滚动事件）和`window.onresize`（窗口大小改变事件）等，可以用于监听相应的行为。 5. **Location对象**：提供关于当前URL的信息，如`location.href`（完整URL）、`location.hostname`（主机域名）、`location.pathname`（页面路径和文件名）、`location.port`（端口号）和`location.protocol`（协议，如HTTP或HTTPS）。可以通过`location.assign()`来加载新的文档。 6. **History对象**：允许开发者操作浏览历史，但不能直接获取历史记录详情，只能通过`history.back()`、`history.forward()`和`history.go()`来导航到前一个、后一个或特定位置的页面。 7. **Navigator对象**：提供了关于用户浏览器的信息，如浏览器名称、版本、平台等。 **DOM（文档对象模型）** 1. **DOM分类**：DOM是一种标准，用于表示HTML或XML文档的结构，分为Document对象、Element对象等。 2. **Document对象**：代表整个HTML或XML文档，提供了操作整个文档的接口，如`getElementById()`、`getElementsByTagName()`等。 3. **Element对象**：代表HTML元素，每个HTML标签都可以看作一个Element对象，有相应的属性和方法，如`innerHTML`、`appendChild()`等。 4. **DOM事件操作**：包括鼠标事件（如`click`、`mouseover`）、键盘事件（如`keydown`、`keyup`）、触屏事件（如`touchstart`、`touchend`）、特殊事件（如`DOMContentLoaded`）以及表单事件（如`submit`、`change`）。处理事件时需要注意浏览器兼容性，通常使用事件监听器（`addEventListener`）和跨浏览器的封装工具。 5. **兼容性处理**：由于不同的浏览器可能对某些API支持不同，因此在编写JavaScript代码时，需要考虑兼容性问题。例如，使用条件语句或者库（如jQuery）来确保代码在所有目标浏览器上都能正常工作。 BOM和DOM是JavaScript与网页进行交互的两个基础框架，它们使得我们能够动态地创建、修改和操作网页内容，以及与用户的交互行为。理解和熟练掌握这两个模型对于任何前端开发者来说都至关重要。