怀旧网，博客详情：JavaScript 中的内置对象讲解

2024-04-15 16:11

15

原创

BOM对象

BOM（Browser Object Model）：浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容

获取一些浏览器相关信息（窗口大小）
操作浏览器的滚动条
浏览器的信息（浏览器的版本）
让浏览器出现一个弹出框（alert、confirm、prompt）

BOM的核心就是window对象
window是浏览器内置的一个对象，里面包含着操作浏览器的方法

一、History （浏览器记录）

window 中有一个对象叫做history
是专门用来存储历史记录信息的
在编写时可不使用 window 这个前缀。

1.1、history.go（指定页）

go(n)：n为正时向前n页，n为负时后退n页

window.history.go(-2); 	// 返回上上页
window.history.go(-1); 	// 返回上一页
window.history.go(0); 	// 刷新当前页
window.history.go(1); 	// 前往下一页

1.2、history.back（上一页）

history.back是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的返回按钮
前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

window.history.back();

1.3、history.forword（下一页）

history.forword是到下一个历史记录里面，也就是到下一个页面。
前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

window.history.forward();

二、Location（浏览器地址）

2.1、操作属性：

pathname、search属性在HashRouter路由模式下会失效，只能在BrowserRouter路由模式下使用

假设浏览器当前加载的URL是:
常用属性：https://www.huaijiuwang.com.cn/

属性	值	说明
location.portocol	https:	页面使用的协议，通常是’`http:`‘或’`https:`’
location.hostname	www.huaijiuwang.com.cn	服务器域名
location.port	443	请求的端口号
location.host	www.huaijiuwang.com.cn:443	服务器名及端口号
location.origin	https://www.huaijiuwang.com.cn/	url的源地址，只读
location.href	完整的url地址	等价于`window.location`

特殊属性：（search 指的是端口号后面紧接着的?号，而不是#号后面的?号）
location.hash：URL散列值（#号之后的部分，包括#号）
location.search：URL的查询字符串（?号后面的部分，包括?号）

- url为： // https://www.huaijiuwang.com.cn/blog/blogDetails?blogId=88
console.log(location.hash)		// “”
console.log(location.search )	// "?blogId=88"

2.2、操作方法：

跳转：location.assign()

跳转到百度页面

// 指定协议跳转
location.assign("http://www.baidu.com")
/* 等同于 */ 
location.href = "http://www.baidu.com"

// 以当前页面协议跳转
location.assign("//www.baidu.com")
/* 等同于 */ 
location.href = "//www.baidu.com"

刷新：location.reload()

从新加载当前页面

// 重新加载，可能是从缓存加载
location.reload();
// 重新加载，从服务器加载
location.reload(true)

三、Window （操作属性）

3.1、对话框

alert（提示框）

alert()是在浏览器弹出一个提示框

这个弹出层只是一个提示内容，只有一个确定按钮
点击这个确定按钮以后，这个提示框就消失了

window.alert("我是一个提示框");

confirm（询问框）

confirm()是在浏览器弹出一个询问框

这个弹出层有一个询问信息和两个按钮
当你点击确认的时候，就会得到 true
当你点击取消的时候，就会得到 false

window.confirm("我是一个询问框");

prompt（输入框）

prompt()是在浏览器弹出一个输入框

这个弹出层有一个输入框和两个按钮
但你点击取消的时候，得到的是null
当你点击确认的时候得到的就是你输入的内容

window.prompt("请输入内容");

3.2、定时器

setTimeout（延时）

倒计时多少时间以后执行函数
语法：setTimeout(要执行的函数，多少时间以后执行);
会在你设定的时间以后执行函数

var timerId = setTimeout(function (){
	console.log('我执行了');
},1000);
console.log(timerId) // 1

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
所以会在页面打开 1 秒钟以后执行函数
只执行一次，就不在执行了
返回值是，当前这个定时器是页面中的第几个定时器

关闭定时器：

我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器
这个 timerId 就是用来关闭定时器的数字
我们有个方法来关闭定时器 clearTimeout
关闭以后定时器就不会在执行了

var timerId = setTimeout(function(){
	console.log("倒计时定时器");
},1000);
clearTimeout(timerId);	// 关闭倒计时定时器

原则上是clearTimeout关闭setTimeout，但是其实是可以通用的

var timeId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
// 关闭倒计时定时器
clearInterval(timerId);

定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的
只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
var timerId2 = setInterval(function(){
	console.log("间隔定时器");
},1000);

console.log(timerId) // 1
console.log(timerId2) // 2

setInterval（间隔）

每隔多少时间执行一次函数
语法：setInterval(要执行的函数，间隔多少时间);
会在你设定的时间以后执行函数

var timerId = setInterval(function (){
	console.log('我执行了');
},1000);

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
每间隔 1 秒钟执行一次函数
只要不关闭，会一直执行
返回值是，当前这个定时器是页面中的第几个定时器

关闭定时器：

我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器
这个 timerId 就是用来关闭定时器的数字
我们有个方法来关闭定时器 clearInterval
关闭以后定时器就不会在执行了

var timerId2 = setInterval(function(){
	console.log("间隔定时器");
},1000);
clearInterval(timeId2);	// 关闭间隔定时器

原则上是clearInterval关闭setInterval，但是其实是可以通用的

var timeId2 = setInterval(function(){
	console.log('间隔定时器');
},1000);
// 关闭间隔定时器
clearTimeout(timerId2);

定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的
只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function(){
	console.log('倒计时定时器');
},1000);
var timerId2 = setInterval(function(){
	console.log("间隔定时器");
},1000);

console.log(timerId) // 1
console.log(timerId2) // 2

3.3、开关窗口

open（打开）

打开一个网址
语法：

/*
	strUrl: 要打开的网址地址
	strWindowName: 
			1. 新窗口名称
			2. _blank：新窗口打开
			3. _self：当前窗口打开
	strWindowFeatures: 窗口特性，比如宽高，逗号分割
*/
const WindowObjectReference = open(strUrl, strWindowName, strWindowFeatures）
/*
	WindowObjectReference: 
			打开的新窗口对象的引用。
			如果调用失败，返回值会是 null。
			如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。
*/

示例：

// 如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口
window.open()	
// 新窗口打开百度
window.open("https://www.baidu.com/","_blank")

注意事项：

1. 如果已经存在以 strWindowName 为名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中。
2. 在这种情况下，方法的返回值是这个已经打开的窗口，并忽略参数 strWindowFeatures。
3. strUrl设为空字符串时，可以在不改变窗口地址的情况下获得一个已经打开的同名窗口的引用。
4. 如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank。

close（关闭）

关闭当前窗口

window.close()	// 关闭

关闭指定open打开的窗口

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open("moreinfo.htm");
}

function closeOpenedWindow() {
  openedWindow.close();
}

四、Window（界面属性）

窗口：指的是浏览器窗口
视口：指的是浏览器窗口中页面视口（不包含浏览器边框和工具栏）
屏幕：指的是电脑屏幕

4.1、窗口与屏幕的位置

距离：screenLeft（左侧）screenTop（顶部）

screenLeft：表示窗口相对于屏幕左侧的位置，返回值的单位是像素值
screenTop：表示窗口相对于屏幕顶部的位置，返回值的单位是像素值

console.log("screenLeft 位置：", window.screenLeft);
console.log("screenTop 位置：", window.screenTop);

定位：moveTo（绝对）moveBy（相对）

依浏览器而定，以下方法可能会部分或全部禁用

moveTo：接收要移动到的新位置的绝对坐标 x和y
moveBy：接收相对当前位置在两个方向上移动的像素值

// 把窗口移动到左上角
window.moveTo(0,0)

// 把窗口移动到坐标位置（200，300）
window.moveTo(200,300)

// 把窗口向下移动100像素
window.moveBy(0,100)

// 把窗口向左移动10像素
window.moveBy(-10,0)

4.2、窗口与视口的大小

视口：innerHeight（高度）innerWidth（宽度）

返回浏览器窗口中页面视口大小（不包含浏览器边框和工具栏）

console.log("innerWidth 宽度：",window.innerWidth);
// innerWidth 宽度： 1002
console.log("innerHeight 高度：",window.innerHeight);
// innerHeight 高度： 907

窗口：outerHeight（高度）outerWidth（宽度）

返回浏览器自身窗口的大小

console.log("outerWidth 宽度：",window.outerWidth);
// outerWidth 宽度： 1680
console.log("outerHeight 高度：",window.outerHeight);
// outerHeight 高度： 1010

浏览器的 onscroll 事件

浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离

思考一个问题？

浏览器真的滚动了吗？

其实我们的浏览器是没有滚动的，是一直在那里

滚动的是什么？是我们的页面

所以说，其实浏览器没有动，只不过是页面向上走了

所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
所以不是在用 window 对象了，而是使用 document 对象
这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候出发
注意：前提是页面的高度要超过浏览器的可视窗口才可以

window.onscroll = function(){
	console.log('浏览器滚动了');
}

4.3、视口与滚动的关系

Safari 浏览器使用的是window.pageXOffset 和 window.pageYOffset

距离：scrollX（向右）scrllY（向下）

scrollX：文档向右滚动的距离，当窗口无法展示整个页面，这时候就需要滚动查看。
scrollY：文档向下滚动的距离，当窗口无法展示整个页面，这时候就需要滚动查看。

console.log("scrollX 向右滚动了多少距离：",window.scrollX);
// scrollX 向右滚动了多少距离： 0
console.log("scrollY 向下滚动了多少距离：",window.scrollY);
// scrollY 向下滚动了多少距离： 0

定位：scrollTo（绝对）scrollBy（相对）

这两个方法接收x和y坐标，表示要滚动到的位置

// 滚动到页面左上角
window.scrollTo(0,0)

// 滚动到页面左边100像素和顶部200像素的位置
window.scrollTo(100,200)

// 相对于当前视口向下滚动100像素
window.scrollBy(0,100)

// 相对于当前视口向右滚动40像素
window.scrollBy(40,0)

五、其他属性（不常用）

5.1、Screen（客户端屏幕）

属性	描述
screen.height	获取整个屏幕的高
screen.width	获取整个屏幕的宽
screen.availHeight	整个屏幕的高减去系统部件的高（可用的屏幕高度）
screen.availWidth	整个屏幕的宽减去系统部件的宽（可用的屏幕宽度）

5.2、Navigator（浏览器信息）

window 中有一个对象叫做 navigator
是专门用来获取浏览器信息的
在编写时可不使用 window 这个前缀。

属性	描述
navigator.userAgent	获取浏览器的整体信息
navigator.appName	获取浏览器名称
navigator.appVersion	获取浏览器的版本号
navigator.platform	获取当前计算机的操作系统

DOM对象

JavaScript DOM（文档对象模型，Document Object Model）是一种跨平台的、语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM 将文档视为树结构，其中每个节点都是文档的一部分，例如文档本身、元素、属性和文本内容。

DOM 树结构

DOM 树是由节点构成的，这些节点包括：

文档节点（Document）：树的根节点，代表整个文档。
元素节点（Element）：如 <div>、<p>、<span> 等 HTML 标签。
属性节点（Attribute）：元素的属性，如 <input type="text"> 中的 type。
文本节点（Text）：包含或代表文本内容的节点。
注释节点（Comment）：HTML 中的注释，如 。
文档类型节点（DocumentType）：定义了文档类型和 HTML 版本，如 <!DOCTYPE html>。

DOM 操作

DOM 操作可以分为几种类型：

创建和插入节点：
- 创建新节点：document.createElement(tagName) 创建一个新的元素节点。
- 添加子节点：element.appendChild(newChild) 将新节点添加到指定元素的子节点列表的末尾。
- 插入节点：element.insertBefore(newChild, referenceChild) 在参考节点前插入新节点。
删除节点：
- 删除节点：element.removeChild(child) 删除指定的子节点。
- 从文档中移除节点：element.removeChild(node) 也可以将节点从文档中移除。
修改节点内容：
- 修改元素内容：element.textContent 或 element.innerHTML 可以获取或设置元素的文本或 HTML 内容。
- 修改属性：element.setAttribute(name, value) 设置元素的属性，element.getAttribute(name) 获取元素的属性值。
事件处理：
- 监听事件：element.addEventListener(type, listener) 为指定元素添加事件监听器。
- 触发事件：element.dispatchEvent(event) 在指定元素上触发事件。
查询和选择元素：
- 通过标签名选择：document.getElementsByTagName(tagName) 获取文档中所有特定标签名的元素。
- 通过类名选择：document.getElementsByClassName(className) 获取文档中所有具有特定类名的元素。
- 通过 ID 选择：document.getElementById(elementId) 获取文档中具有特定 ID 的元素。
- 使用 CSS 选择器：document.querySelector(selector) 和 document.querySelectorAll(selector) 通过 CSS 选择器获取元素。

DOM 事件

事件是用户或浏览器执行的操作，例如点击、滚动、加载等。DOM 事件模型包括以下几个部分：

事件流：事件从捕获阶段开始，经过目标节点，最后到达冒泡阶段。
事件处理器：函数，用于处理事件。
事件对象：包含事件的详细信息，如类型、目标元素等。

DOM 兼容性和标准

随着 Web 标准的发展，DOM API 也在不断演进。现代浏览器通常遵循 W3C 标准，但不同浏览器和版本之间可能存在差异。开发者需要关注这些差异，并可能需要使用 polyfills 或者特性检测来确保代码的兼容性。

结论

DOM 是 JavaScript 与网页交互的桥梁，通过 DOM，开发者可以创建动态和交云的网页应用。了解 DOM 的结构、操作和事件处理是每个前端开发者的基本功。随着现代前端框架和库的出现，DOM 操作变得更加高效和便捷，但理解其背后的原理仍然至关重要。

编程教学分享 js

平台作者：怀旧（联系作者）

QQ：444915368

邮箱：444915368@qq.com

电话：17623747368

登录后才可以进行评论哦！