一，BOM和DOM模型
Document Object Model
文档对象模型
Browser Object Model
浏览器对象模型
二，window对象
Window 对象表示浏览器中打开的窗口
1，常见的属性
status 设置窗口状态栏的文本。
Screen 对 Screen 对象的只读引用。
document 对 Document 对象的只读引用。
history 对 History 对象的只读引用。
location 用于窗口或框架的 Location 对象
### BOM和DOM模型
#### 一、BOM与DOM概览
在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。
##### BOM：浏览器对象模型
BOM并不是一个标准，而是浏览器厂商为了实现某些功能而提供的一系列API的集合。它提供了与浏览器交互的方法和属性，例如弹出新窗口、获取屏幕分辨率等。BOM的核心是`window`对象，几乎所有的浏览器事件都与这个对象有关。
##### DOM：文档对象模型
DOM则是一个跨平台和语言的中立接口，它定义了访问HTML和XML文档的标准，通过DOM可以动态地访问文档结构、内容以及样式，并且能够添加、删除或修改这些元素。DOM将整个文档看作一个倒置的树形结构，每个节点都是一个对象，可以通过脚本进行访问和操作。
#### 二、Window对象
`Window`对象是BOM的核心，几乎所有与浏览器交互的行为都可以通过它来实现。下面详细介绍一些常见的属性：
1. **status**：设置或返回窗口状态栏中的文本。这在早期的浏览器中比较常见，但现在很少使用了。
- **示例**：
```javascript
window.status = "Hello World!";
```
2. **Screen**：只读属性，返回一个`Screen`对象，该对象包含了关于用户屏幕的信息，如分辨率、颜色深度等。
- **示例**：
```javascript
console.log(window.screen.width); // 获取屏幕宽度
```
3. **document**：只读属性，返回当前窗口中的`Document`对象。这是DOM的核心，通过它可以访问到页面中的所有元素。
- **示例**：
```javascript
document.getElementById("myDiv").style.color = "red"; // 修改指定ID元素的颜色
```
4. **history**：只读属性，返回一个`History`对象，该对象提供了历史记录的访问方法，比如前进和后退。
- **示例**：
```javascript
history.back(); // 返回上一页
```
5. **location**：用于获取和设置当前窗口的位置信息，包括URL的各个组成部分。
- **示例**：
```javascript
location.href = "http://www.example.com"; // 导航到新的URL
```
#### 三、DOM模型详解
DOM模型中包含了一系列的对象，它们构成了文档的结构，以下是一些常见的对象：
1. **Document**：代表整个HTML或XML文档，是DOM树的根节点。通过它我们可以访问文档中的任何其他节点。
- **示例**：
```javascript
var body = document.body; // 获取body元素
```
2. **Element**：代表文档中的HTML元素，如`<div>`、`<p>`等。
- **示例**：
```javascript
var div = document.createElement("div"); // 创建一个新的div元素
```
3. **Node**：DOM树中的每个节点都是一个Node对象，包括元素节点、文本节点、属性节点等。
- **示例**：
```javascript
var textNode = document.createTextNode("Hello"); // 创建一个新的文本节点
```
4. **Text**：代表文档中的文本内容。
- **示例**：
```javascript
var textContent = document.createTextNode("Some text").nodeValue; // 获取文本节点的内容
```
5. **Attribute**：代表元素的属性，如`id`、`class`等。
- **示例**：
```javascript
var attr = document.createAttribute("class"); // 创建一个新的属性节点
```
6. **HTMLFormElement**：表单元素，用于创建HTML表单。
- **示例**：
```javascript
var form = document.createElement("form"); // 创建一个新的表单元素
```
7. **HTMLInputElement**：输入元素，如文本框、按钮等。
- **示例**：
```javascript
var input = document.createElement("input"); // 创建一个新的输入元素
```
8. **HTMLButtonElement**：按钮元素。
- **示例**：
```javascript
var button = document.createElement("button"); // 创建一个新的按钮元素
```
通过以上对BOM和DOM模型及其核心对象的介绍，我们可以看到，这两种模型为前端开发者提供了丰富的API，使得我们能够在JavaScript中灵活地操作和控制浏览器与网页内容。无论是改变页面布局、响应用户交互还是管理浏览器行为，BOM和DOM都是不可或缺的基础工具。
