【17.0】JavaScript之DOM

【一】什么是DOM/BOM

文档对象模型（Document Object Model, 简称 DOM）
浏览器对象模型（Browser Object Model, 简称 BOM）
是 JavaScript 与网页内容及浏览器环境进行交互的两种核心概念。

【1】DOM

（1）概述

文档对象模型（DOM）是一个编程接口，它以树状结构来表示 HTML 或 XML 文档。
在 DOM 中，每个HTML元素、属性、文本节点等都被视为一个对象，通过JavaScript可以创建、查询、修改和删除这些对象。

（2）示例

document.getElementById(id): 通过元素ID获取DOM元素对象。
element.querySelector/pseudo-class: 根据CSS选择器或伪类选择DOM元素对象。
element.appendChild(newElement): 向指定元素添加子元素。
element.setAttribute(name, value): 设置元素属性值。
element.innerText/innerHTML: 获取或设置元素内的文本内容或HTML内容。

【2】BOM

（1）概述

浏览器对象模型（BOM）则是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。

（2）示例

window.open(url[, name[, features]]): 打开新的浏览器窗口或tab访问指定URL。
window.location.href: 获取当前页面的URL地址，并可用于更改页面位置。
window.history.back(): 返回历史记录中的上一页。
navigator.userAgent: 获取浏览器的信息，例如类型、版本等。

【3】总结

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

【二】Window对象

Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口。

【1】`open()`

打开新窗口或者获取对一个已经存在的窗口的引用。
第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小

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

【2】`close()`

关闭当前窗口。

window.close();

【3】`setTimeout()`

在指定的时间延迟后执行一次指定的函数或者一段代码。

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

【4】`setInterval()`

以固定的时间间隔重复执行指定的函数或者一段代码。

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

【5】`alert()`

显示一个带有指定消息和一个确认按钮的警告框。

window.alert("Hello, World!");

【6】`confirm()`

显示一个带有指定消息和两个按钮（确认和取消）的对话框。

if (window.confirm("Are you sure?")) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}

【7】`prompt()`

显示一个带有指定消息和一个文本输入框的对话框。

let name = window.prompt("Please enter your name:");

【8】`innerHeight` 属性

返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。
使用示例:

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

【9】`innerWidth` 属性

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

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

【10】监听 `resize` 事件

需要注意的是，这两个属性返回的值会随着窗口的大小调整而改变
- 因此如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现。

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

在使用这两个属性时，可以根据返回的数值进行相应的布局或调整操作，以适应当前窗口的尺寸。

【11】`window.opener`

是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。
在以下情况下可以使用 window.opener

（1）场景一： `window.open()`

当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口。
例如，在父窗口中的 JavaScript 代码中执行以下代码：

let popup = window.open("popup.html"); // 打开一个弹出窗口

然后，在弹出窗口 popup.html 中的 JavaScript 代码中，可以通过 window.opener 引用到父窗口：

let parentWindow = window.opener;
console.log(parentWindow); // 输出父窗口对象

（2）场景二： `postMessage()` 方法

当前窗口是通过其他窗口向其发送消息（使用 postMessage() 方法）时，可以使用 event.source 属性来获取消息来源窗口，并通过 window.opener 来引用该来源窗口。
例如，在来源窗口的 JavaScript 代码中，向当前窗口发送消息：

let currentWindow = window.open("current.html"); // 打开当前窗口

// 向当前窗口发送消息
currentWindow.postMessage("Hello", "http://example.com");

然后，在当前窗口 current.html 中的 JavaScript 代码中，通过监听 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`

此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。
例如，要获取页面标题：

let pageTitle = window.document.title;
console.log(pageTitle);

【2】`window.location`

此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。
例如，要在新标签页中打开一个 URL：

window.location.href = 'https://example.com';

（1）`window.location.href`*

获取当前页面的完整 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);

（6）`window.location.pathname`

获取当前页面的路径部分。
示例：

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

（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。
示例：

// 将当前页面重定向到 example.com
window.location.assign("http://example.com");

（10）`window.location.reload()`*

重新加载当前页面。
示例：

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

【3】`window.history`

此子对象用于操作浏览器的历史记录，包括向前和向后导航。
- 通过 window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量。
例如，要后退到上一个页面：

window.history.back();

（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`

此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。
例如，要获取用户代理字符串：

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

（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);

【四】弹出框

弹出框是网页开发中常用的交互组件，用于显示警告、确认或提示信息，并与用户进行互动。
常见的弹出框类型包括警告框、确认框和提示框。

【1】警告框(alert)：

警告框用于向用户显示一条重要的警告信息，通常包含一个确定按钮用于关闭弹出框。
示例代码：

alert("这是一个警告框！");

【2】确认框(confirm)：

确认框用于向用户询问一个问题或确认某个操作，通常包含一个确定按钮和一个取消按钮。
示例代码：

if (confirm("你确定要删除吗？")) {
  // 用户点击了确认按钮
  // 执行删除操作
} else {
  // 用户点击了取消按钮
  // 执行取消操作
}

【3】提示框(prompt)：

提示框用于向用户展示一条信息，并等待用户输入数据，通常包含一个输入框和确定/取消按钮。
示例代码：

prompt("请输入您的姓名：", "默认值");

【五】计时器相关

既可以放在 body 内又可以放在 head 内

毫秒为单位

计时器在网页开发中经常用于实现定时触发某些操作的功能。
根据需求，可以使用不同的方法来触发定时器。

【1】过一段时间触发(setTimeout)：

如果需要在经过一定的时间后触发某个操作
- 可以使用setTimeout函数来设置定时器。
示例代码：

setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

function foo() {
  // 在延迟后执行的操作
}

setTimeout(foo, 5000); // 延迟5秒后执行

上述代码将在5秒钟后执行指定的函数。可以根据实际需要调整延迟的时间。

【2】每隔一段时间触发一次(setInterval)

如果需要每隔一定的时间重复触发某个操作
- 可以使用setInterval函数来设置定时器。
示例代码：

setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

function bar() {
  // 每隔一段时间执行的操作
}

setInterval(bar, 2000); // 每2秒钟执行一次

上述代码将每隔2秒钟执行一次指定的函数。同样，可以根据实际需要调整时间间隔。

【3】清除定时器(clearTimeout/clearInterval)

（1）clearTimeout：

clearTimeout函数用于取消使用setTimeout函数设置的定时器。
- 通过传递setTimeout函数返回的计时器标识符作为参数，可以停止相应的定时器。
- 如果没有及时调用clearTimeout取消定时器，定时器会按照预定的时间触发，造成不必要的操作。
示例代码：

var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

// 如果需要取消定时器
clearTimeout(timer);

（2）clearInterval

clearInterval函数用于取消使用setInterval函数设置的定时器。
- 通过传递setInterval函数返回的计时器标识符作为参数，可以停止相应的定时器。
- 类似地，未及时调用clearInterval会导致定时器一直重复执行。
示例代码：

var timer = setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

// 如果需要取消定时器
clearInterval(timer);

注意，在调用clearTimeout或clearInterval函数时

需要将原先保存的计时器标识符作为参数传递给这两个函数，以确保取消正确的定时器。

【4】案例:

function func2() {
        alert("123")
    }

    function show() {
        let t = setInterval(func2, 3000); // 每隔3s触发一次

        function inner() {
            clearInterval(t) // 清除定时器
        }
        
        setTimeout(inner, 9000) // 9s后触发
    }

    show()

给定的代码是用JavaScript编写的，定义了两个函数：
- func2 和 show。
func2 函数简单地显示一个带有消息 "123" 的弹窗。
show 函数稍微复杂一些。
- 它首先定义一个变量 t，并将其赋值为 setInterval 函数的返回值。
- setInterval 函数设置了一个每300毫秒（或3秒）调用一次 func2 函数的定时器。
接下来，show 函数定义了一个名为 inner 的内部函数。
- 这个内部函数用于使用 clearInterval 函数清除之前定义的定时器。
- clearInterval 函数停止了 func2 函数的重复调用。
最后，show 函数使用 setTimeout 函数计划在900毫秒（或9秒）之后执行 inner 函数。
- 这意味着，在9秒后，inner 函数将被调用，并通过清除定时器来停止 func2 函数的重复执行。
总结一下，show 函数设置了一个定时器，每3秒调用一次 func2 函数，但在9秒后，该定时器被清除，阻止了 func2 函数的进一步执行。

【5】注意：

（1）确保清除定时器

如果不再需要定时器，应当及时清除，以避免资源浪费。
可以使用clearTimeout或clearInterval函数来取消定时器。

（2）考虑浏览器兼容性

在使用定时器时，应注意不同浏览器对定时器的支持可能存在差异，可以使用各种前端框架或库提供的方法来处理兼容性问题。

（3）注意定时器的性能影响

频繁的定时器操作可能会对网页性能产生一定影响，特别是在移动设备上，所以应慎重使用大量的定时器。

【六】查找标签

直接查找标签和间接查找标签是在Web开发中常用的两种方式。

操作页面的时候要使用document对象

【1】直接查找标签`getElement`

（1）getElementById

根据元素的ID属性直接获取到对应的HTML元素。

var element = document.getElementById("myElement");

拿到对象本身

（2）getElementsByTagName：

根据标签名称获取匹配的所有元素。

var elements = document.getElementsByTagName("div");

拿到数组(容器)

（3）getElementsByClassName：

根据类名获取匹配的所有元素。

var elements = document.getElementsByClassName("myClass");

拿到数组(容器)

（4）小结

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

xxxEle

divEle

aEle

pEle

这些方法可以根据不同的需求和条件进行标签查找。
- 使用getElementById适合于查找单个具有唯一ID的元素
- getElementsByTagName和getElementsByClassName适合于查找多个相同标签名称或类名的元素。

需要注意的是，以上方法返回的是一个HTML元素或HTML元素列表（NodeList）

【2】半间接查找标签`query`

（1）querySelector

document.querySelector方法返回第一个匹配选择器的元素

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

（2）querySelectorAll

document.querySelectorAll方法返回所有匹配选择器的元素列表。

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

（3）小结

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

【3】间接查找标签

（1）parentElement:

parentElement属性返回指定元素的父元素。
它可以在DOM（文档对象模型）层次结构中向上导航。
例如，如果有一个元素<div id="parent">，element.parentElement将返回<div>元素。

（2）children:

children属性返回指定元素的所有子元素组成的集合。
这个集合中不包括文本节点和其他非元素节点。
通过使用索引或循环，您可以对单个子元素进行访问和操作。
例如，element.children[]将返回指定元素的第一个子元素。

（3）firstElementChild:

firstElementChild属性指向指定元素的第一个子元素。
它类似于children属性，但它只返回第一个子元素，忽略在它之前存在的任何非元素节点。
例如，element.firstElementChild将返回指定元素的第一个子元素。

（4）lastElementChild

类似于firstElementChild，lastElementChild属性指向指定元素的最后一个子元素。
它仅包括最后一个元素作为其子节点，忽略在它之后的任何非元素节点。
例如，element.lastElementChild将返回指定元素的最后一个子元素。

（5）nextElementSibling:

nextElementSibling属性返回紧跟在指定元素后面的下一个兄弟元素。
它允许您在DOM中导航并访问特定元素的下一个兄弟元素。
例如，如果在父容器中有多个元素，element.nextElementSibling将返回指定元素的下一个兄弟元素。

（6）previousElementSibling:

previousElementSibling属性类似于nextElementSibling，但它返回在指定元素之前出现的前一个兄弟元素。
它使您能够访问DOM层次结构中指定元素的前一个兄弟元素。
例如，element.previousElementSibling将返回指定元素的前一个兄弟元素。

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="d1">最外层第一个div [div]
    <div> 第一个div 内的 第一个 div [div>div]</div>
    <p class="p1">
        第一个div 内的 第一个 p [div>p]
        <span>第一个div 内的 第一个 p 下的第一个 span  [div>p>span]</span>
    </p>
    <p>
        第一个div 内的 第二个 p [div>p]
    </p>
</div>

<div>
    最外层第二个div [div]
</div>

</body>
</html>

（1）直接查找

// （1）通过 ID 查询标签 - 返回单个
document.getElementById("d1");
// <div id="d1">…</div>

// （2） 通过class查询标签 - 返回数组
document.getElementsByClassName("p1");
// HTMLCollection [p.p1]

// （3） 通过标签查询标签 - 返回数组
document.getElementsByTagName("div")
// HTMLCollection(3) [div#d1, div, div, d1: div#d1]

（2）用变量存储标签

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

xxxEle

divEle

aEle

pEle

let divEle = document.getElementsByTagName("div");
// undefined

divEle
// HTMLCollection(3) [div#d1, div, div, d1: div#d1]

（2）间接查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>最外层第一个div头顶上的 [div]</div>
<div id="d1">最外层第一个div [div]
    <div> 第一个div 内的 第一个 div [div>div]</div>
    <p class="p1">
        第一个div 内的 第一个 p [div>p]
        <span>第一个div 内的 第一个 p 下的第一个 span  [div>p>span]</span>
    </p>
    <p>
        第一个div 内的 第二个 p [div>p]
    </p>
</div>

<div>
    最外层第二个div [div]
</div>

<div>
    最外层第二个div脚底下的 [div]
</div>

</body>
</html>

查找父标签

// 注意是否需要索引取值
let pEle = document.getElementsByClassName("p1")[0];
// undefined

pEle
// <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

查找子标签

let divEle = document.getElementById("d1");
// undefined


divEle
// <div id="d1">…</div>

// 取所有的子标签
divEle.children
/* HTMLCollection(3) [div, p.p1, p]0: div1: p.p12: plength: 3[[Prototype]]: HTMLCollection */

// 取第一个子标签
divEle.firstElementChild
// <div> 第一个div 内的 第一个 div [div>div]</div>

// 取最后一个子标签
divEle.lastElementChild
// <p> 第一个div 内的 第二个 p [div>p] </p>

// 同级别下面第一个
divEle.nextElementSibling
// <div> 最外层第二个div [div] </div>

// 同级别上面第一个
divEle.previousElementSibling
// <div>最外层第一个div头顶上的 [div]</div>

【七】节点操作

节点操作是指在文档对象模型（DOM）中对节点进行创建、获取、修改、删除等操作。
以下是几种常见的节点操作：

【1】创建节点：

createElement(tagName): 创建一个具有指定标签名的元素节点。
createTextNode(text): 创建一个包含指定文本内容的文本节点。
createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。

【2】获取节点：

getElementById(id): 根据元素的id属性获取对应的元素节点。
getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
getElementsByClassName(className): 根据元素的类名获取一组元素节点。
querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。

【3】修改节点

node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
parent.removeChild(childNode): 从父节点中移除指定子节点。
node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

【4】属性操作：

element.getAttribute(attribute): 获取指定属性的值。
element.setAttribute(attribute, value): 设置指定属性的值。
element.removeAttribute(attribute): 移除指定属性。

【5】文本操作

node.textContent: 获取或设置节点的文本内容。
node.innerHTML: 获取或设置节点的HTML内容。

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1"> div
    <p id="p1"> div > p</p>
    <span> div > span </span>
</div>
</body>
</html>

（1）通过DOM操作动态的创建img标签

并且给标签加属性
最后将标签添加到文本中

这个操作只是作用域当前页面，并没有对原始文件生效

刷新后就会消失相关的效果

let imgEle = document.createElement("img");
// undefined
imgEle
// <img>

// 向标签内添加图片链接
imgEle.src="111.jpg";
// '111.jpg'
imgEle
// <img src="111.jpg">

// 向图片内设置自定义属性
imgEle.setAttribute("name","dream");
// undefined
imgEle
// <img src="111.jpg" name="dream">

// 向图片内设置默认属性
imgEle.setAttribute("title","一张图片");
// undefined
imgEle
// <img src="111.jpg" name="dream" title="一张图片">

// 向div标签下面塞入img标签
let divEle = document.getElementById("d1");
// undefined
divEle.appendChild(imgEle)
// undefined

createElement
setAttribute
appendChild

（2）创建a标签

设置属性
设置文本
添加到标签内部
- 添加到指定标签的上面

let aEle = document.createElement("a");
// undefined

aEle
// <a></a>

// 设置默认属性：链接地址
aEle.href = "https://www.mzitu.com/"
// 'https://www.mzitu.com/'

aEle
// <a href="https://www.mzitu.com/"></a>

// 设置文本内容
aEle.innerText = "点我有你好看"
// '点我有你好看'

aEle
// <a href="https://www.mzitu.com/">点我有你好看</a>

// 将a标签插入到指定位置
let divEle = document.getElementById("d1");
// undefined
let pEle = document.getElementById("p1")
// undefined
divEle.insertBefore(aEle,pEle)
// <a href="https://www.mzitu.com/">点我有你好看</a>

innerText
insertBefore

【6】补充innerText/innerHTML

// 只拿标签内的文本 -- 不识别 html标签
divEle.innerText
// 'div 点我有你好看\n\ndiv > p\n\ndiv > span'

// 拿标签内的全部内容和标签 -- 识别 html标签
divEle.innerHTML
/* ' div\n    <a href="https://www.mzitu.com/">点我有你好看</a><p id="p1"> div &gt; p</p>\n    <span> div &gt; span </span>\n' */

innerText和innerHTML是用于在网页中更新文本内容的两种方法。

它们都可以用于修改HTML元素中的文本，但有一些关键的区别。

（1）innerText

innerText属性用于设置或返回指定元素中的文本内容，不包括HTML标记。
当使用innerText属性时，所有HTML标记都将被视为纯文本并被直接显示在页面上。
这意味着如果在innerText中包含HTML标记，那么标记将被作为普通文本显示而不会被解析。
此外，innerText属性是只读的，即使尝试修改该属性的值也不会有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerText); // 输出："This is bold text."
   element.innerText = "Updated text"; // 尝试修改innerText但不会生效
</script>

（2）innerHTML

innerHTML属性用于设置或返回指定元素的HTML内容，可以包含HTML标记和文本。
与innerText不同，使用innerHTML属性时，所有HTML标记都会被解析并在页面上正确渲染。
- 这意味着可以通过innerHTML属性来添加、修改或删除HTML元素及其属性。
需要注意的是，innerHTML属性可以导致代码注入攻击，因此使用时需谨慎验证并过滤用户输入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
</script>

（3）总结

innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
innerHTML用于操作元素中的HTML内容，可以包含HTML标记

【八】获取值操作

【1】获取属性值

可以使用getAttribute()方法来获取HTML元素的属性值。
该方法需要传入属性名作为参数，并返回属性对应的值。

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

【2】获取文本内容：

可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。
这些属性会返回元素内包含的文本，但存在一些差异：
innerText：返回元素的纯文本内容，不包括HTML标记。
innerHTML：返回元素的HTML内容，包括HTML标记。
textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

// 示例：获取id为myElement的div元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.textContent;
console.log(textContent);

【3】获取用户输入值

对于表单元素（如input、select、textarea等）
可以通过获取其value属性来获取用户输入的值。

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

【4】获取文件

当用户选择一个或多个文件后
- 可以通过访问.files属性来获取这些文件的信息。
.files属性返回一个FileList对象
- 其中包含了所选文件的列表。
- 可以通过遍历该列表来处理每个文件。
以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：

// 获取文件选择框的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);
  }
});

在以上示例中，我们首先获取具有id="fileInput"的文件选择框的DOM元素，并为其添加了一个change事件监听器。
- 当用户选择文件后，change事件将被触发。
在事件处理程序中，我们使用.files属性获取选择的文件列表，并遍历该列表。
- 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。

需要注意的是，.files属性在非IE浏览器中提供了广泛的支持

但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。

【九】属性操作

【1】class属性操作

（1）介绍

.classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

（2）使用示例

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");

（3）注意事项

classList是只读的，不能直接赋值。
classList是一个动态的列表，会实时反映元素的当前类名状态。
可以通过遍历classList来访问每个类名，或者使用length属性获取类名数量。
classList方法在大多数现代浏览器中都得到了支持。
如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能。

【2】标签样式

看案例

【案例】

<!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

<!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>
<p>花天酒地，花前月下</p>
</body>
</html>

标签样式

let pEle = document.getElementsByTagName("p")[0]
// undefined

// 修改标签样式中的颜色
pEle.style.color = "red";
// 'red'

// 修改标签样式中的字体大小
pEle.style.fontSize = "28px"
// '28px'

// 修改标签样式中的背景颜色
pEle.style.backgroundColor = "green"
// 'green'

【十】事件

在计算机编程中
- 事件（Event）是指在程序执行期间发生的特定操作或状态变化。
- 事件可以来自用户的交互操作（如点击、鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
- 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。

【1】鼠标事件：

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

【2】键盘事件

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

【3】表单事件：

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

【4】文档加载事件：

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

【5】定时器事件

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

【6】自定义事件：

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

【7】示例代码：

var button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  alert("按钮被点击了！");
});

以上示例代码中，当id为"myButton"的按钮被点击时，会触发点击事件，并弹出一个提示框。

【十一】绑定事件的两种方式

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

这种方式是通过在HTML标签中直接添加事件属性来实现事件绑定。
- 例如，我们可以在一个按钮的onclick属性中指定一个JavaScript函数，当按钮被点击时，该函数会被调用。
示例代码：

<button onclick="myFunction()">点击我</button>

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

在上述示例中，当按钮被点击时，会调用名为myFunction的JavaScript函数，并弹出一个提示框。
这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式。

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

这种方式是通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。
- HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。
示例代码：

<button id="myButton">点击我</button>

<script>
  var button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("按钮被点击了！");
  });
</script>

在上述示例中，通过getElementById方法获取id为"myButton"的按钮元素，然后使用addEventListener方法绑定了一个点击事件监听器。
- 当按钮被点击时，会执行回调函数，并弹出一个提示框。
使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的。

【3】小结

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

posted @ 2024-02-27 09:55 Chimengmeng 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【17.0】JavaScript之DOM

【一】什么是DOM/BOM

【1】DOM

（1）概述

（2）示例

【2】BOM

（1）概述

（2）示例

【3】总结

【二】Window对象

【1】open()

【2】close()

【3】setTimeout()

【4】setInterval()

【5】alert()

【6】confirm()

【7】prompt()

【8】innerHeight 属性

【9】innerWidth 属性

【10】监听 resize 事件

【11】window.opener

（1）场景一： window.open()

（2）场景二： postMessage() 方法

【三】Window子对象

【1】window.document

【2】window.location

（1）window.location.href*

（2）window.location.protocol

（3）window.location.host

（4）window.location.hostname

（5）window.location.port

（6）window.location.pathname

（7）window.location.search

（8）window.location.hash

（9）window.location.assign()

（10）window.location.reload()*

【3】window.history

（1）window.history.length

（2）window.history.back()*

（3）window.history.forward()*

（4）window.history.go()

（5）window.history.pushState()

（6）window.history.replaceState()

【4】window.navigator

（1）window.navigator.userAgent*

（2）window.navigator.platform*

（3）window.navigator.vendor

（4）window.navigator.language

（5）window.navigator.cookieEnabled

（6）window.navigator.plugins

【四】弹出框

【1】警告框(alert)：

【2】确认框(confirm)：

【3】提示框(prompt)：

【五】计时器相关

【1】过一段时间触发(setTimeout)：

【2】每隔一段时间触发一次(setInterval)

【3】清除定时器(clearTimeout/clearInterval)

（1）clearTimeout：

（2）clearInterval

【4】案例:

【5】注意：

（1）确保清除定时器

（2）考虑浏览器兼容性

（3）注意定时器的性能影响

【六】查找标签

【1】直接查找标签getElement

（1）getElementById

（2）getElementsByTagName：

（3）getElementsByClassName：

（4）小结

【2】半间接查找标签query

（1）querySelector

（2）querySelectorAll

（3）小结

【3】间接查找标签

（1）parentElement:

（2）children:

【1】`open()`

【2】`close()`

【3】`setTimeout()`

【4】`setInterval()`

【5】`alert()`

【6】`confirm()`

【7】`prompt()`

【8】`innerHeight` 属性

【9】`innerWidth` 属性

【10】监听 `resize` 事件

【11】`window.opener`

（1）场景一： `window.open()`

（2）场景二： `postMessage()` 方法

【1】`window.document`

【2】`window.location`

（1）`window.location.href`*

（2）`window.location.protocol`

（3）`window.location.host`

（4）`window.location.hostname`

（5）`window.location.port`

（6）`window.location.pathname`

（7）`window.location.search`

（8）`window.location.hash`

（9）`window.location.assign()`

（10）`window.location.reload()`*

【3】`window.history`

（1）`window.history.length`

（2）`window.history.back()`*

（3）`window.history.forward()`*

（4）`window.history.go()`

（5）`window.history.pushState()`

（6）`window.history.replaceState()`

【4】`window.navigator`

（1）`window.navigator.userAgent`*

（2）`window.navigator.platform`*

（3）`window.navigator.vendor`

（4）`window.navigator.language`

（5）`window.navigator.cookieEnabled`

（6）`window.navigator.plugins`

【1】直接查找标签`getElement`

【2】半间接查找标签`query`