【17.0】JavaScript--DOM和BOM

【17.0】JavaScript–DOM和BOM

【一】DOM/BOM介绍

【DOM】

文件对象模型
在dom中，每个html元素，属性，文本点都被视为一个对象，我们可以创建/查询/修改和删除这些对象

【BOM】

浏览器对象模型
浏览器对象模型式浏览器提供的API集合，注意运用在处理于计算机环境相关的任务，如窗口管理、导航、cookie、location等

【小结】

他们都是javascript开发中不可或缺的部分，分别负责对网页内容和浏览器环境进行深层次的操作，使得前端开发者能够实现丰富的交互功能和动态效果

【二】Window对象

【概念】

表示浏览器窗口的全局对象，它提供了一些方法来操控和管理窗口

【方法】

（1）window.open()

【用处】放入网页地址，打开新的窗口或者对一个已经存在的窗口的引用
【参数】参数1：放网页地址参数2：可以为空（有self等）参数3：窗口大小

【实例】

let newWindow = window.open("https://www.example.com", "_blank");
let newWindow = window.open("https://pic.netbian.com/", "_blank",'height=400px,width=400px');

（2）window.close( )

关闭当前窗口
```
window.close();
```

（3）setTimeout( )

【用处】指定时间延迟后再执行后续的代码

【参数】放入需要执行的代码，和时间

setTimeout(function(){// 执行代码
}, 100); // 1秒后执行

（4）setInterval ()

【用处】固定的时间间隔重复执行指定的函数或代码

【参数】执行的代码时间

setInterval(function(){// 执行代码
}, 200); // 每2秒执行一次

（5）window.alert( )

【用处】显示一个带有指定消息和一个确认按钮的警告框
【参数】写入弹窗要弹出的内容
```
window.alert('hello world');
```

（6）window.confirm()

【用处】显示一个带有指定消息和两个按钮（确认和取消）的对话框
【参数】可以写上弹窗信息，底部会自带确认和取消

【实例】

if(window.confirm("Are you sure?")){//点击确认按钮执行的代码
}else{//点击确认按钮执行的代码
}

if(window.confirm("Are you sure?")){//点击确认按钮执行的代码window.alert('hello world');
}else{//点击确认按钮执行的代码window.alert('bye world');
}

（7）window.prompt( )

【用处】显示一个带有指定消息和一个文本输入框的对话框
【参数】写入输入信息的提示信息，会自带有一个输出框

【实例】

var name= window.prompt('请输入您的姓名');

（8）window.innerHeight属性

【用处】得到浏览器窗户的内部高度（即视口的高度),单位是像素，不包括浏览器的工具栏/滚动条等元素

【实例】

let windowHeight = window.innerHeight;
console.log(windowHeight); // 输出当前窗口的视口高度

//打开半个窗口 197
//全部打开 274
单位式像素

（9）window.innerWidth属性

【用处】返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素

【实例】

let windowWidth = window.innerWidth;
console.log(windowWidth); // 输出当前窗口的视口宽度

【小结】我们可以根据返回值再去调整我们的页面布局

（10）监听resize事件

【意义】使用监听搭配着上面两个属性，对我们的窗口大小改变进行监听，从而有利于我们调整页面

【实例】

window.addEventListener("resize", function() {let windowHeight = window.innerHeight;let windowWidth = window.innerWidth;console.log("Window Height:", windowHeight);console.log("Window Width:", windowWidth);
});

Window Height: 194
VM95:5 Window Width: 516
VM119:4 Window Height: 194
VM119:5 Window Width: 516
VM95:4 Window Height: 194
VM95:5 Window Width: 523
VM119:4 Window Height: 194
VM119:5 Window Width: 523
//会自动报数

（11）window.opener

【用处】当前窗口打开另一个窗口对象，它是window对象的一个属性，用于在当前窗口引用到打开它的父窗口或者来源窗口
【使用场景1】配合window.open( )
- 直接在现在父窗口跳到链接的子窗口
```
let popup = window.open("popup.html"); // 打开一个弹出窗口
```
- 输出父窗口对象，就是将最原来的窗口一些信息打出来
```
let parentWindow = window.opener;
console.log(parentWindow); // 输出父窗口对象
```

【使用场景2】

postMessage() 方法

当前窗口是通过其他窗口向其发消息（使用postMessage() 方法）时，可以使用envent.source属性来获取信息来源窗口，并用window.open来引用该来源窗口

let currentWindow = window.open("current.html"); 
// 打开当前窗口
// 向当前窗口发送消息
currentWindow.postMessage("Hello", "http://example.com");

然后在当前窗口current.html中的js代码中，通过message事件来接收来自来源窗口的消息，并使用 event.source 和 window.opener 引用到来源窗口：

window.addEventListener("message", function(event) {let message = event.data;let sourceWindow = event.source;let openerWindow = window.opener;console.log("Message:", message);console.log("Source Window:", sourceWindow);console.log("Opener Window:", openerWindow);
});

【三】window子对象

如果是window子对象，window可以不写

【1】window.document

【概念】此子对象表示当前窗口中的文档对象
【用法】可以使用使用其下的各种方法来获得关于当前页面的html结构，样式dom元素等

【实例】

//获取标题
let pageTitle = window.document.title;
console.log(pageTitle);

【2】window.location

【概念】此子对象包含当前页面url信息，提供了一些页面导航相关的方法
【用法】可以获得当前页面的url,查询字符串参数，路径等信息，并且可以使用一些方法来导航到其他页面

（1）window.location.href*

【实例1】用herf属性打开一个url

window.location.href = 'https://example.com';
//直接而在当前页面跳转到新网页

【实例2】获取当前页面的完整url（包括协议，域名，路径等）

let currentURL = window.location.href;
console.log(currentURL);window.href = url // 跳转到目标地址

（2）window.location.protocol

【用法】获取当前页面的协议部分（例如 ‘http:’ 或 ‘https:’）

【实例】

let protocol = window.location.protocol;
console.log(protocol);

（3）window.location.host

【用法】获取当前页面的主机（域名和端口号）部分

【实例】

let host = window.location.host;
console.log(host);

（4）window.location.hostname

【用法】获取当前页面的主机名部分

【实例】

let hostname = window.location.hostname;
console.log(hostname);

（5）window.location.port

【用法】获取当前页面的主机名部分

【实例】

let port = window.location.port;
console.log(port);
//63342

（6）window.location.pathname

【用法】获取当前页面的路径部分

【实例】

let pathname = window.location.pathname;
console.log(pathname);

http://localhost:63342/%E6%B5%8B%E8%AF%95/%E4%BD%9C%E4%B8%9A.html?_ijt=fac20vtad47o5sd480ep3pblcq&_ij_reload=RELOAD_ON_SAVE
//?_ijt=fac20vtad47o5sd480ep3pblcq&_ij_reload=RELOAD_ON_SAVE

（7）window.location.search

【用法】获取当前页面的查询参数部分（即 URL 中问号后面的内容）

【实例】

let searchParams = window.location.search;
console.log(searchParams);

（8）window.location.hash

【用法】获取当前页面的片段标识部分（即 URL 中井号后面的内容）

【实例】

let hash = window.location.hash;
console.log(hash);

（9）window.location.assign()

【用法】将当前页面重定向到指定的 URL

【实例】

let hash = window.location.hash;
console.log(hash);

（10）window.location.reload()*

【用法】重新加载当前页面

【实例】

// 重新加载当前页面
window.location.reload();

【3】window.history

【概念】对浏览器的历史记录精选的操作

（1）window.history.length

【意义】得到当前浏览器有多少条浏览记录

【实例】

let historyLength = window.history.length;
console.log(historyLength);

（2）window.history.back()*

【意义】返回当上一个记录，就是回退按钮
【示例】
```
window.history.back();
```

（3）window.history.forward()*

【意义】返回当下一个记录，就是前进按钮
【示例】
```
window.history.forward();
```

（4）window.history.go()

【意义】传入数字，正数表示前进几个页面，负数表示后退几个页面

【示例】

// 后退两个历史记录
window.history.go(-2);// 前进一个历史记录
window.history.go(1);// 重新加载当前页
window.history.go();

（5）window.history.pushState()

【意义】向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL

【示例】

// 添加新的历史记录状态
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

（6）window.history.replaceState()

【意义】替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL

【示例】

// 替换当前历史记录状态
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【4】window.navigator

【概念】可以通过这个属性查找设备相关的信息

（1）window.navigator.userAgent*

【意义】返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息
【用处】可以用来校验反爬程序

【示例】

let userAgent = window.navigator.userAgent;
console.log(userAgent);

（2）window.navigator.platform*

【意义】返回操作系统平台，如 “Win32”、“MacIntel” 等。

【示例】

let platform = window.navigator.platform;
console.log(platform);

（3）window.navigator.vendor

【意义】返回浏览器的厂商或供应商名称

【示例】

let vendor = window.navigator.vendor;
console.log(vendor);

（4）window.navigator.language

【意义】返回浏览器的首选语言，通常是用户操作系统的默认语言。

【示例】

let language = window.navigator.language;
console.log(language);

（5）window.navigator.cookieEnabled

【意义】返回一个布尔值，表示浏览器是否启用了 cookie

【示例】

let cookieEnabled = window.navigator.cookieEnabled;
console.log(cookieEnabled);

（6）window.navigator.plugins

【意义返回一个包含浏览器插件列表的 PluginArray 对象。

【示例】

let plugins = window.navigator.plugins;
console.log(plugins);

【四】弹出框

【概念】在网页开发中常用的交互软件，用于显示警告、确认或提示信息，并与用户进行互动
【类型】常见的有警告框（alert ）、确认框（confirm）、提示框（prompt）

（1）警告框

【概念】用于向用户显示一条重要的警告消息，通常包含一个确定按钮用于关闭弹出框
【示例】
```
alert('这是一个警告框');
```

（2）确认框

【概念】弹出框，含有弹出内容和按钮（确认和取消）

【示例】

//括号里写弹出语句
//if else语句中进行确认和取消操作if (confirm('您确定要删除吗？')){//确认按钮执行操作console.log('您已点击确认');
}else{//取消按钮执行的代码console.log('您已点击取消');
}

（3）提示框

【概念】提示用户输入一条信息，并有确认和取消按钮

【示例】

prompt('请输入您的姓名:','默认值');

【五】计时器相关

【概念】设置定时器，可以定时触发某一个操作，一秒是1000
【位置】可以放在body内，也可以放在head内

【1】一定时间后触发（setTimeout)

【概念】类似于一个定时器，延迟几秒后执行该代码

【示例】

直接搭配无名函数

setTimeout( function(){//延迟后的操作，我写了警告案例，时间设成3salert('这是一个警告框');
},3000 )

和有名函数搭配

var fun=function(){//延迟后的操作，我写了警告案例，时间设成3salert('这是一个警告框')}setTimeout( fun,3000 )

【2】每隔一段时间就触发setInterval

【概念】每隔固定时间出发相同操作，没有停止操作，不会停止，慎用

【示例】

无名函数

setInterval( function(){//延迟后的操作，我写了警告案例，时间设成3salert('这是一个警告框');
},3000 )

有名函数（最好用有名哪个，无名的没名字不好关闭）

var fun=function(){//延迟后的操作，我写了警告案例，时间设成3salert('这是一个警告框')}setInterval( fun,3000 )

【3】清除定时器

【概念】
- clearTimeout：用于清理setTimeout定时器
- clearInterval：取消使用setInterval定时器

【示例】

```
clearTimeout(定时器函数名)
```

套娃式

//每隔三秒触发一次，9s后触发关闭定时器
function func2() {alert("123")}function show() {let t = setInterval(func2, 3000); // 每隔3s触发一次function inner() {clearInterval(t) // 清除定时器}setTimeout(inner, 9000) // 9s后触发}show()

【六】浏览器html中标签操作

【概念】我们想获取有关界面标签的一些信息，需要使用document的一些属性方法

【1】getElement

【概念】通过不同的方式拿元素

（1）getElementByld通过id拿

【概念】我们输入id属性名，得到这个id下的内容

【示例】

//我定义了一个块级标签，里面放了username的一些信息
var element = document.getElementById("username");
console.log(element);

//得到该id标签下的内容
<div id="username"><h2>zhouxiaoqi</h2>
</div>

（2）getElementByClassName通过类名拿

【概念】我们输入id属性名，得到这个id下的内容

【示例】

var elements = document.getElementsByClassName("myClass");
//拿到这个类下的一些信息

（3）getElementTagName 通过标签名拿元素

【概念】通过div、p等标签拿元素

【示例】

//根据块级标签拿
var elements = document.getElementsByTagName("div");
//拿到的带有索引，类似于每个块级标签的简介

（4）小结

当我们在用变量名指代标签对象时，一般都建议写成

xxxEle
	divEle
	aEle
	pEle

这些方法可以根据不同的需求和条件进行标签查找。
- 使用getElementById适合于查找单个具有唯一ID的元素
- getElementsByTagName和getElementsByClassName适合于查找多个相同标签名称或类名的元素。
需要注意的是，以上方法返回的是一个HTML元素或HTML元素列表（NodeList）

【2】半间接查找标签query（选择器相关标签）

【介绍】是通过选择器去查找界面的元素

（1）querySelector

【概念】我们有很多标签，在选择器里可以对标签进行一些里的设置，给他增加颜色等等，现在我们通过选择器去查找元素相关内容
【返回值】返回的是第一个匹配选择器的元素

【示例】

// 使用querySelector查询单个元素
var element = document.querySelector(".myClass");

（2）querySelectorAll

【概念】返回所有匹配选择器的元素列表

// 使用querySelectorAll查询多个元素
var elements = document.querySelectorAll("div");

（3）小结

选择器可以是标签名称、类名、ID、属性等，更复杂的选择器甚至可以选择嵌套结构
通过选择器查询，您可以更灵活地查找和操作HTML元素

【3】间接查找标签

【介绍】父子兄弟这种关系，去找同级或者上下级的元素
【类比】和py中的类相似，例如块级标签有很多行，div标签就是p的父标签

（1）parentElement:

【介绍】属性返回指定元素的父元素

（2）children

【介绍】返回指定元素的所有子元素组成的集合，再通过索引可以对子元素进行访问和操作
【注意点】这个集合中不包括文本节点和其他非元素节点

（3）firstElementChild

【介绍】firstElementChild属性指向指定元素的第一个子元素
【注意点】值返回第一个子元素，也是会忽略在它之前存在的任何非元素节点

（4）lastElementChild

【介绍】lastElementChild属性指向指定元素的最后一个子元素
【注意点】值返回最后一个子元素，也是会忽略在它之后存在的任何非元素节点

（5）nextElementSibling

【介绍】属性返回紧跟在指定元素后面的下一个兄弟元素

（6）previousElementSibling

【介绍】返回在指定元素之前出现的前一个兄弟元素

【用法】

// 注意是否需要索引取值
let pEle = document.getElementsByClassName("p1")[0];
// undefinedpEle
// <p class="p1">…</p>// （1）查找父标签
pEle.parentElement
// <div id="d1">…</div>
pEle.parentElement.parentElement
// <body>…</body>
pEle.parentElement.parentElement.parentElement
/* <html lang="en"><head>…</head><body>…</body></html> */
pEle.parentElement.parentElement.parentElement.parentElement
// null

【七】节点操作

【概念】节点就是js中的内容，像标签是节点，元素也是节点，下面的主要是对元素节点进行操作

【1】创建节点

（1）createElement(tagName)

【介绍】创建一个标签名名节点，节点名可以是div,p等（类似word文档中，插入段或行等）
【示例】

（2）createTextNode(text)

【介绍】创建一个包含文本内容的文本节点（类似word文档中，插入一块文本内容）
【示例】

（3）createDocumentFragment()

【介绍】创建一个空的文档片段节点，可用于高效地插入多个节点（类似于word文档中插入空文本）
【示例】

【2】获取节点

（1）getElementById(id)

【介绍】根据元素的id属性获取对应的元素节点

（2）getElementsByTagName(tagName)

【介绍】根据元素的标签名获取一组元素节点

（3）getElementsByClassName(className)

【介绍】根据元素的类名获取一组元素节点

（4）querySelector(selector)

【介绍】使用CSS选择器获取匹配的第一个元素节点

（5）querySelectorAll(selector)

【介绍】使用CSS选择器获取匹配的所有元素节点

【3】修改节点

（1）node.appendChild(childNode)

【介绍】将一个节点作为父节点的最后一个子节点添加到指定节点
【示例】

（2）parent.removeChild(childNode)

【介绍】从父节点中移除指定子节点
【示例】

（3）node.replaceChild(newNode, oldNode):

【介绍】使用新节点替换旧节点
【示例】

（4）node.insertBefore(newNode, referenceNode)

【介绍】在参考节点之前插入新节点

【4】属性操作

（1）element.getAttribute(attribute):

【介绍】获取指定属性的值。
【示例】

（2）element.setAttribute(attribute, value):

【介绍】设置指定属性的值。
【示例】

（3）element.removeAttribute(attribute):

【介绍】移除指定属性。
【示例】

【5】文本操作

（1）node.textContent:

【介绍】获取或设置节点的文本内容
【示例】

（2）node.innerHTML: 获取或设置节点的HTML内容

【介绍】获取或设置节点的HTML内容
【示例】

【八】获取值操作

【1】获取属性值

【方法】getAttribute()方法来获取HTML元素的属性值

【用法】传入属性名得到属性值（标签.getAttribute(属性名)）

// 示例：获取id为myElement的元素的src属性值
var element = document.getElementById("myElement");
var srcValue = element.getAttribute("src");
console.log(srcValue);

【2】获取文本内容

【innerText】返回纯文本内容
【innerHTML】返回元素的html内容
【textContent】返回元素及其子元素的文本内容，包括隐藏元素和注释等

【示例】

//获得id为myelement的div，元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.textContent;
console.log(textContent);

【3】获得用户的输入值

【方法】类似于字典取值，将用户输入的内容放到字典里，.value属性取值

【示例】

// 示例：获取id为myInput的input元素的值
var input = document.getElementById("myInput");
var inputValue = input.value;
console.log(inputValue);

【4】获取文件信息

【介绍】用户可以选择文件，上传文件，我们将用户处理的文件存放起来，然后拿到这个文件信息
【方法】利用 .files属性
- 返回一个FileList文件夹，遍历拿到文件的信息

【示例】

搭配监听事件，当有改变的时候，可以及时对改变进行处理，拿到很完整的文件

// 获取文件选择框的DOM元素
var fileInput = document.getElementById("fileInput");// 添加change事件监听器，以便在用户选择文件后执行操作
fileInput.addEventListener("change", function() {// 获取选择的所有文件var files = fileInput.files;// 遍历文件列表，并处理每个文件for (var i = ; i < files.length; i++) {var file = files[i];console.log("文件名：" + file.name);console.log("文件类型：" + file.type);console.log("文件大小（字节）：" + file.size);console.log("最后修改时间：" + file.lastModified);}
});

【九】属性操作

【介绍】在html界面中，属性有类属性，id属性等等（其实就是给一些元素起名字，这些元素是一块抽象的内容，都具有自己的细节）

【1】class属性操作

【介绍】
- 通过类进行操作
- .classList() 是JavaScript中用于获取HTML元素的类名列表的方法，返回一个DOMTokenList对象，该对象包含了元素的所有类名
- 拿到类名，可以对某个类名进行add、remove等操作（此时名字就像列表的一个元素）
【注意点】
- classlist只读，不能直接赋值，是一个动态的表（具有实时性），可以通过遍历访问每个类名
- classList方法在大多数现代浏览器中都得到了支持，如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能

【示例】

var element = document.getElementById("myElement");
var classList = element.classList;// 检查是否包含某个类名
if (classList.contains("myClass")) {console.log("myElement包含myClass类名");
}// 添加类名
classList.add("newClass");// 移除类名
classList.remove("oldClass");// 切换类名（如果存在则移除，否则添加）
classList.toggle("active");

【2】样式标签

【介绍】得到标签下的属性，这些属性是对这个标签的一个样式相关，比如背景颜色等

【示例】

html界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {height: 400px;width: 400px;border-radius: 50%;}.bg_red {background-color: red;}.bg_green {background-color: green;}</style>
</head>
<body>
<div id="d1" class="d1 bg_green bg_red"></div>
</body>
</html>

类属性操作

let divEle = document.getElementById("d1");
// undefined// （1） 查看当前类标签下的所有属性
divEle.classList
/* DOMTokenList(3) ['d1', 'bg_green', 'bg_red', value: 'd1 bg_green bg_red'] */ // 移除当前类标签下的某个属性
divEle.classList.remove("bg_green")
// undefined// 添加当前类标签下的某个属性
divEle.classList.add("bg_green")
// undefined// 校验当前标签下是否包含某个属性
divEle.classList.contains("d1")
true
divEle.classList.contains("d2")
false// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");
// false
divEle.classList.toggle("bg_red");
// true

标签样式

let pEle = document.getElementsByTagName("p")[0]
// undefined// 修改标签样式中的颜色
pEle.style.color = "red";
// 'red'// 修改标签样式中的字体大小
pEle.style.fontSize = "28px"
// '28px'// 修改标签样式中的背景颜色
pEle.style.backgroundColor = "green"
// 'green'

【十】事件

【介绍】事件就是在程序运行期间发生的一些特定操作或者状态变化（就是发生事情了），可以触碰到不同的事物发生不同的事情

【用法】

//可以提前定义某个函数，然后用触发事件的方法，将函数放进去，触发后就可以执行
//先拿到标签，当id为"myButton"的按钮被点击时，会触发点击事件，并弹出一个提示框。
//类似我id写username，只有点击username才会触动
var button = document.getElementById("myButton");button.addEventListener("click", function(event) {alert("按钮被点击了！");
});

【1】鼠标–触发的事件

click：鼠标点击事件。
mouseover：鼠标悬停在元素上的事件。
mouseout：鼠标离开元素的事件。
mousedown：鼠标按下事件。
mouseup：鼠标松开事件。
mousemove：鼠标移动事件。

【2】键盘–触发的事件

keydown：键盘按下事件。
keyup：键盘松开事件。
keypress：键盘按键被按下并松开事件。

【3】表单事件：

submit：表单提交事件。
change：表单值改变事件。
focus：表单元素获取焦点事件。
blur：表单元素失去焦点事件。

【4】文档加载事件：

load：页面完全加载完成事件。
unload：页面关闭或离开事件。

【5】定时器事件

setTimeout：在指定的延迟时间后触发事件。
setInterval：每隔一定时间触发事件。

【6】自定义事件：

开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【十一】绑定事件的方式

【介绍】上面介绍了有哪些操作可以触发事件，现在我们将这个出发操作绑定到某个事物身上

【1】传统的事件属性绑定

【方法】直接在标签里给这个事物，添加时间属性

【示例】

例如在按钮的onclick属性指定一个代码，当点击的时候就会触发

<button onclick="myFunction()">点击我</button><script>function myFunction() {alert("按钮被点击了！");}
</script>

【2】现代的事件监听绑定

【方法】对某些元素都有自己的id或者class类，我们通过选择id或class来帮顶
【用法】
- 先选择内容
- 给这个内容增加一个属性，属性里面有我们触发事件的代码，出发后就运行这个代码
【优点】可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的
【示例】
```
<button id="myButton">点击我</button><script>var button = document.getElementById("myButton");button.addEventListener("click", function() {alert("按钮被点击了！");});
</script>
```
- 在上述示例中，通过getElementById方法获取id为"myButton"的按钮元素，然后使用addEventListener方法绑定了一个点击事件监听器。
- - 当按钮被点击时，会执行回调函数，并弹出一个提示框

【小结】

无论选择哪种事件绑定方式，都应根据具体情况来确定使用哪种方法。
传统的事件属性绑定简单易用，适合简单的事件绑定场景；
现代的事件监听绑定更加灵活和可控，适用于复杂的交互需求。