14day,15day-BOM,回顾-优快云博客

本文详细介绍了BOM（浏览器对象模型），包括window对象的使用、窗口尺寸操作、弹出层功能（alert,prompt,confirm）、地址栏属性、浏览器历史、标签页管理以及相关事件处理，如onload、onresize和onscroll。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM

认识 BOM

全名：Browser Object Model：浏览器对象模型
=》私人：一整套操作浏览器的属性和方法
=》注意：BOM 不是 js 给的，是浏览器给我们的
=》BOM 的规则就是浏览器制造厂商给我们的
=》利用 js 的语法去操作浏览器的相关内容
BOM 的顶级对象是 window
- 所有和 BOM 相关的内容都是 window.xxxx
- 在书写的时候，都可以省略 window 不写

浏览器的窗口尺寸

浏览器的可视窗口的宽度和高度
- 语法：
1. window.innerWidth
  =》获取的是宽度
2. window.innerHeight
  =》获取的是高度
  注意：获取到的是包含滚动条在内的尺寸

浏览器的弹出层

浏览器设置了三种弹出层

1. alert：提示框

语法：window.alert(“文本内容”)；
表现：有一段文本，和一个确认按钮
返回值：没有

let res = alert("zd");
console.log(res); // undefined

2. prompt：输入框

语法：window.prompt(“提示文本内容”);
返回值：如果用户点击的是取消按钮，返回 null，如果点击的是确定，那就是输入的文本内容，如果什么都没输入，则返回一个空字符串
表现：一个输入框然后有两个选择框（取消与确定）

let res2 = window.prompt("请输入年龄");
console.log(res2);

3. confirm：选择框

语法：window.confirm(“文本内容”);
表现：比输入框少了一个输入的区域，同样有两个选择按钮
返回值：如果点击取消，返回 false，点击确定返回 true。

let res3 = window.confirm("今天zd很开心");
console.log(res3); // true/false

共同点：
- 都会阻断程序的继续执行(执行到弹出层时才会阻止代码执行，在弹出层之前的代码不受影响)
- 直到用户操作为止

console.log(456);
setTimeout(function () {
  console.log(789);
}, 1000);
let res3 = window.confirm("今天zd很开心");
console.log(res3); // true/false
console.log(123);
// setTimeout(function(){
//   console.log(789);
// },1000)

浏览器的地址栏

在 window 下有一个成员叫做 location 里面存储的都是和地址栏相关的内容

1. href：

是一个可读写的属性
读：
- 语法：window.location.href;
- 得到的就是当前页面的地址栏的完整信息
写：
- 语法：window.location.href = “值”
- 作用：把当前地址栏修改

console.log(window.location.href);
let btn = document.querySelector("button");
// 跳转页面
btn.onclick = function () {
  window.location.href = "http://baidu.com";
};

2. reload()

是一个方法，使用的时候需要加上()
语法：window.location.reload();
作用：把当前页面重新加载一次，刷新。

3. replace()

语法：window.location.replace(URL);
作用：将当前浏览器地址替换掉，调用这个方法的网页不会被写入浏览记录里面。

console.log(window.location.href);
let btn = document.querySelector("button");
// 跳转页面
btn.onclick = function () {
  window.location.href = "http://baidu.com";
  // window.location.reload();
  // window.location.replace("http://baidu.com")
};
console.log(window.location);

console.log(btn.toString());
console.log({}.toString());
// Array.prototype.toString = function(){
//   console.log(123);
//   return 456;
// }
console.log([1, 2, 3].toString());

let obj = {};
obj[btn] = 789;
console.log(obj[btn]);
console.log(obj);
console.log(obj[btn.toString()]);
console.log(obj["[object HTMLButtonElement]"]);

浏览器的历史记录

window 下有一个成员叫做 history，里面储存的都是和历史记录相关的信息

1. 历史回退

语法：window.history.back();
作用：回到上一个历史页面
前提：您必须的有上一个页面，即当前页面是从某一个页面跳转过来的。
等价于浏览器上的 ⬅️ 按钮

2. 历史前进

语法：window.history.forward();
作用：去到下一个页面
前提：你必须得有一个下一个页面，当前页面是从某一个页面回退过来的
等价于浏览器上的 ➡️ 按钮

3. 历史跳转

window.location.go(数字)
作用：进行历史跳转，根据数组不同进行不同的跳转
正整数：历史前进
0：重新打开当前页面（刷新页面）
负整数：历史回退

浏览器的标签页

操作标签页的方法

1. open()

语法：window.open(“地址”)
作用：开启一个新的标签页并且打开指定的地址网页

2. close()

语法：window.close()
作用：关闭当前标签页
注意：只能关闭用 open 方法打开的页面

浏览器的常见事件！！！

由浏览器的行为触发的事件

1. onload

语法：window.onload = function(){}
时机：页面所有资源还在完毕后触发
作用：当你把 js 代码书写在 head 内的时候，而且你还想要操作页面的元素，就需要 onload 事件。
注意：除了整个页面有加载完毕事件，图片/视频/音频也都有。

2. onresize

语法：window.onresize = function(){}
时机：页面可是窗口大小改变的时候触发，不管是宽度还是高度，只要改变了就会触发
作用：
- 响应式布局
- 在移动端判断横屏

拓展
获取当前浏览器的详细信息

window.navigator

3. onscroll

语法：window.οnscrοll= function(){}
时机：页面滚动的时候触发
注意：不管是横向的还是竖向的，主要滚动了就会触发

浏览器卷去的尺寸

能够知道滚动了多少距离

分成了卷去的高度和宽度

卷去的高度

语法：document.documentElement.scrollTop
=>当页面有 DOCTYPE 标签时使用
document.body.scrollTop
=>当页面没有 DOCTYPE 标签时使用

卷去的宽度

语法：document.documentElement.scrollLeft
=>当页面有 DOCTYPE 标签时使用
document.body.scrollLeft
=>当页面没有 DOCTYPE 标签时使用

浏览器滚动到

对浏览器的滚动条进行定位
=》其实就是设置浏览器卷去的高度/宽度
scrollTo()
根据不同的参数去决定不同的表现形式
参数方案 1:
=》传递数字
=》语法：window.scrollTo(x,y)
x 表示设置卷去的宽度
y 表示设置卷去的高度
注意：如果传递的是数字，则必须传递两个参数
参数方案 2:
=》传递一个对象数据类型
=》语法：window.scroolTo({
top:yyy,
left:xxx,
behavior:“smooth”
})
注意：如果传递一个对象可以只写一个值，同时可以直接设置平滑滚动，不需要额外的书写样式

获取尺寸合集
视口宽/高（不含滚动条）

document.documentElement.clientWidth
document.documentElement.clientHeight：
视口宽/高（含滚动条）
window.innerWidth/innerHeight
网页文档/元素总宽/高或者叫滚动的高度/宽度
document.documentElement.scrollWidth
document.documentElement.scrollHeight
网页被卷去的宽/高
document.documentElement.scrollTop
document.documentElement.scrollLeft
屏幕的宽/高
window.screen.width
window.screen.height

以下是对你提到的这些属性的解释：（ai 解析）

document.documentElement.clientWidth：
返回当前文档根元素的可视宽度，即视口的宽度（包括滚动条）。
document.documentElement.clientHeight：

window.innerWidth：
返回当前窗口的视口（viewport）宽度，即网页文档可见区域的宽度。如果存在滚动条，滚动条也会算在内。
window.innerHeight：

document.documentElement.scrollWidth：
返回整个文档的宽度，包括文档被隐藏的部分（被滚动条卷去的部分）。
document.documentElement.scrollHeight：
这两个属性返回的是网页文档的总宽度和总高度，无论文档是否有滚动条，都会包括滚动条被卷去的部分。

document.documentElement.scrollTop：
返回当前滚动条在垂直方向上滚动的距离，即页面向下滚动的量。
document.documentElement.scrollLeft：
返回当前滚动条在水平方向上滚动的距离，即页面向右滚动的量。
这两个属性返回的是滚动条被卷去的宽度和高度，表示页面滚动的位置。

window.screen.width：
返回当前屏幕的宽度（以像素为单位）。
window.screen.height：

回顾

DOM

全名：Document Object Model
一整套操作文档流的属性和方法
DOM以树状结构出现，由节点组成
DOM里面常见的几种节点：
- 文本节点：文本内容，包含换行和空格
- 元素节点：页面内的所有标签
  - html：是一个元素节点，但是是页面上最大的元素节点，叫做根元素节点
- 注释节点：注释内容，包括换行和空格
- 属性节点：用于修饰一个元素的属性
- document：根节点，作为页面的承载出现，不是一个标签
对DOM的操作，就是对DOM树的操作

获取节点
1-1 获取元素节点
- 非常规标签
  - html：document.documentElement
  - body：document.body
  - head：document.head
- 常规标签
  - getElementById()
  - getElementByClassName()
  - getElementByTagName()
  - getElementByName()
  - querySelector()
  - querySelectorAll()
    1-2 获取节点：
- childNodes
- children
- firstChild
- firstElementChild
- lastChild
- lastElementChild
- previousSibling
- previousElementSibling
- nextSibling
- nextElementSibling
- parentNode
- parentElement
- attributes
操作元素文本
2-1 innerText
- 读：元素.innerText;
- 写：元素.innerText = ‘值’
  2-2 innerHTML
- 读：元素.innerHTML;
- 写：元素.innerHTML = ‘值’
  2-3 value
- 操作表单元素的value值
- 读：表单元素.value
- 写：表单元素.value = “值”
  注意：以上三种方式的写入都是完全覆盖的写入
操作元素属性
3-1 操作原生属性
- 读：元素.属性名
- 写：元素.属性名 = “值”
  3-2 操作自定义属性
- 获取：元素.getAttribute(“属性名”)
- 设置：元素.setAttribute(“属性名”, “属性值”)
- 删除：元素.removeAttribute(“属性名”)
  3-3 操作h5自定义属性
- 获取：元素.dataset.属性名
- 设置：元素.dataset.属性名 = “属性值”
- 删除：delete 元素.dataset.属性名
操作元素样式
4-1 获取元素的行内样式
- 语法：元素.style.样式名
  4-2 设置元素行内样式
- 语法：元素.style.样式名 = “样式值”
  4-3 获取元素的非行内样式（包含了行内样式和非行内样式）
- window.getComputedStyle(元素).样式名
  注意：涉及到带有中划线的样式名，需要写成驼峰命名或者数组关联语法。
操作元素类名
5-1 className
- 读：元素.className
- 写：元素.className = “值”
- 追加：元素.className += “新类名”
  5-2 classList
- 获取：元素.classList
- 添加：元素.classList.add(“className”)
- 删除：元素.classList.remove(“className”)
- 切换: 元素.classList.toggle(“className”);
获取元素尺寸
6-1 获取元素内容+padding+border区域的尺寸
- 元素.offsetWidth
- 元素.offsetHeight
  6-2 获取元素内容+padding区域的尺寸
- 元素.clientWidth
- 元素.clientHeight
  注意：当元素的display为none时，无法获取尺寸
获取元素偏移量时，可以使用以下语法：
- 要获取元素相对于其定位父级的水平偏移量：ele.offsetLeft
- 要获取元素相对于其定位父级的垂直偏移量：ele.offsetTop
要获取可视窗口的区域尺寸（不包含滚动条），可以使用以下属性：
- 可视窗口的宽度：document.documentElement.clientWidth
- 可视窗口的高度：document.documentElement.clientHeight
节点操作包括创建、插入、删除、替换和克隆节点的操作：
9-1 创建节点：
- 创建元素节点：使用 document.createElement("标签名")
- 创建文本节点：使用 document.createTextNode("文本内容")
  9-2 插入节点：
- 向父节点末尾添加子节点：使用 父节点.appendChild(子节点)
- 在指定节点之前插入子节点：使用 父节点.insertBefore(子节点, 谁的前面)
  9-3 删除节点：
- 删除节点本身：使用 节点.remove()
- 从父节点中移除子节点：使用 父节点.removeChild(子节点)
  9-4 替换节点：
- 替换子节点：使用 父节点.replaceChild(换上的节点, 被替换的节点)
  9-5 克隆节点：
- 克隆节点（不克隆后代节点）：使用 节点.cloneNode()
- 克隆节点（包括后代节点）：使用 节点.cloneNode(true)
节点属性包括nodeType、nodeName和nodeValue：
10-1 nodeType表示节点的类型，常见的类型及其对应的变量如下：
- document节点：9（对应的变量：Node.DOCUMENT_NODE）
- 文本节点：3（对应的变量：Node.TEXT_NODE）
- 属性节点：2（对应的变量：Node.ATTRIBUTE_NODE）
- 注释节点：8（对应的变量：Node.COMMENT_NODE）
- 元素节点：1（对应的变量：Node.ELEMENT_NODE）
  10-2 nodeName表示节点的名称，根据节点类型不同有不同的取值：
- 元素节点：大写标签名
- 属性节点：属性名
- 文本节点：#text
- 注释节点：#comment
- document节点：#document
  10-3 nodeValue表示节点的值，根据节点类型不同有不同的取值：
- 元素节点：null
- 文本节点：文本内容
- 属性节点：属性值
- 注释节点：注释内容
- document节点：null

// console.log(document.nodeType);
// console.log(Node.DOCUMENT_NODE);
// console.log(document.nodeType === Node.DOCUMENT_NODE);
// console.log(box.nodeType);
// console.log(Node.ELEMENT_NODE);
// console.log(box.firstChild.nodeType);
// console.log(Node.COMMENT_NODE);
// // console.log(document.nodeName);
// // console.log(box.nodeName);
// // console.log(box.firstChild.nodeValue);
// console.log(box.nodeName); // DIV
// console.log(document.nodeName); // #document
// console.log(box.firstChild.nodeName); // #text
// console.log(box.attributes.id.nodeName); // id
// console.log(box.lastChild.nodeName); // #comment
console.log(document.nodeValue);