【12.0】前端基础JavaScript之DOM

【一】什么是DOM/BOM

截至目前为止，我们虽然已经学会了js语法，但是还是没办法跟浏览器进行交互
BOM(Browser Object Model)
- 浏览器对象模型
  - js代码操作浏览器
DOM(Docunment Object Model)
- 文档对象模型
  - js代码操作标签

【二】Window对象

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

【1】`open()`：

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

let newWindow = window.open("https://www.example.com", "_blank");
let newWindow = window.open("https://www.meizitu.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`：

当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口。

例如，在父窗口中的 JavaScript 代码中执行以下代码：

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

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

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

当前窗口是通过其他窗口向其发送消息（使用 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】注意：

确保清除定时器：
- 如果不再需要定时器，应当及时清除，以避免资源浪费。
- 可以使用clearTimeout或clearInterval函数来取消定时器。
考虑浏览器兼容性：
- 在使用定时器时，应注意不同浏览器对定时器的支持可能存在差异，可以使用各种前端框架或库提供的方法来处理兼容性问题。
注意定时器的性能影响：
- 频繁的定时器操作可能会对网页性能产生一定影响，特别是在移动设备上，所以应慎重使用大量的定时器。

【六】查找标签

直接查找标签和间接查找标签是在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元素中的文本，但有一些关键的区别。

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>

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>

总结：

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属性操作

介绍

.classList() 是JavaScript中用于获取HTML元素的类名列表的方法。

它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

使用示例：

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

注意事项：

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"的按钮被点击时，会触发点击事件，并弹出一个提示框。

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

传统的事件属性绑定：

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

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

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

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

现代的事件监听绑定：

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

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

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

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

无论选择哪种事件绑定方式，都应根据具体情况来确定使用哪种方法。

传统的事件属性绑定简单易用，适合简单的事件绑定场景；

现代的事件监听绑定更加灵活和可控，适用于复杂的交互需求。

posted @ 2023-07-05 17:26 Chimengmeng 阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【12.0】前端基础JavaScript之DOM

【12.0】前端基础JavaScript之DOM

【一】什么是DOM/BOM

【二】Window对象

【1】open()：

【2】close()：

【3】setTimeout()：

【4】setInterval()：

【5】alert()：

【6】confirm()：

【7】prompt()：

【8】innerHeight 属性

【9】innerWidth 属性

【10】监听 resize 事件

【11】window.opener

在以下情况下可以使用 window.opener：

【三】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】直接查找标签getElement：

（1）getElementById：

（2）getElementsByTagName：

（3）getElementsByClassName：

（4）小结

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

（1）querySelector

（2）querySelectorAll

（3）小结

【3】间接查找标签

（1）parentElement:

（2）children:

（3）firstElementChild:

（4）lastElementChild:

（5）nextElementSibling:

（6）previousElementSibling:

【案例】

（1）直接查找

（2）用变量存储标签

（2）间接查找

【七】节点操作

【1】创建节点：

【1】`open()`：

【2】`close()`：

【3】`setTimeout()`：

【4】`setInterval()`：

【5】`alert()`：

【6】`confirm()`：

【7】`prompt()`：

【8】`innerHeight` 属性

【9】`innerWidth` 属性

【10】监听 `resize` 事件

【11】`window.opener`

在以下情况下可以使用 `window.opener`：

【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`：