JavaScript 进阶篇：DOM、事件流与 BOM 详解

3. 获得 data-* 为名的节点

data- 为自定义属性*

<div data-id="1" data-spm="bzd"></div>

const one = document.querySelector('div');
console.log(one.dataset.id); // 1
console.log(one.dataset.spm); // bzd

data- 属性的命名规则如下：*

• 前缀必须是 data-：这是固定的，不能更改。
• 之后的部分必须由字母、数字、连字符（-）组成：不能包含空格或其他特殊字符。
• 不能以数字开头：这是因为 HTML 属性名称不能以数字开始。

// 3. 获取具有特定属性值的元素
const divByDataId = document.querySelector("[data-id='1']");
console.log(divByDataId);

// 获取所有具有 data-id 属性的元素
const divsByDataId = document.querySelectorAll("[data-id='1']");
console.log(divsByDataId);

divByDataId.style.backgroundColor = "pink";

为 DOM 节点添加删除切换 class 类

HTML 样式：

<div class="box">文化</div>

CSS 样式：

.box { width: 200px; height: 200px; color: #333; }
.active { color: red; background-color: pink; }

JavaScript 样式： 通过 classList 可以为 div 节点添加/删除/切换类（相比 className 更安全，不会覆盖前面的类名）。

const box = document.querySelector('.box');
// 添加类
box.classList.add('active');
// 删除类
box.classList.remove('active');
// 切换类，有就加上，没有就删掉
box.classList.toggle('active');

定时器

延迟函数

setTimeout 为定时器延迟函数，可以达到某个时间后执行里面的函数。

function greet() {
    console.log("Hello, world!");
}
// 5000 毫秒（5 秒）后执行 greet 函数
setTimeout(greet, 5000);

取消定时器函数 clearTimeout()。

// 设置定时器延迟函数
const timeoutId = setTimeout(sayHi, 3000);
// 取消定时器
clearTimeout(timeoutId);

事件监听

事件类型

下面给大家推荐几个常用的事件，如果有其他需要可以再进行查询。

1. 鼠标事件

• mouseover 和 mouseout 会有冒泡效果。
• mouseenter 和 mouseleave 没有冒泡效果（推荐）。
• click: 当用户点击元素时触发。
• dblclick: 当用户双击元素时触发。
• mousedown: 当用户按下鼠标按钮时触发。
• mouseup: 当用户释放鼠标按钮时触发。
• mousemove: 当用户移动鼠标时触发。
• mouseover: 当鼠标指针移动到元素上方时触发。
• mouseout: 当鼠标指针移出元素时触发。
• mouseenter: 当鼠标指针进入元素时触发（不冒泡）。
• mouseleave: 当鼠标指针离开元素时触发（不冒泡）。

2. 键盘事件

• keydown: 当用户按下键盘上的键时触发。
• keyup: 当用户释放键盘上的键时触发。
• keypress: 当用户按下键盘上的字符键时触发（不推荐使用，已被弃用）。

JavaScript 事件监听器可以用于处理各种用户交互和系统事件。

3. 表单事件

• submit: 当表单被提交时触发。
• change: 当表单控件的值发生变化时触发。
• input: 当用户输入数据时触发。
• focus: 当元素获得焦点时触发。
• blur: 当元素失去焦点时触发。
• select: 当用户选中文本（例如在 <input> 或 <textarea> 中）时触发。

键盘监听事件事例

<input type="text">

当向 input 输入框中输入字体按下和弹起键盘时会触发该事件

const input = document.querySelector('[type=text]');
// 键盘事件
input.addEventListener('keydown', function () {
    console.log('按下');
});
input.addEventListener('keyup', function () {
    console.log('弹起');
});

事件流

事件流（Event Flow）是指浏览器在处理事件时的过程。事件流主要有三种阶段：捕获阶段、目标阶段和冒泡阶段。

事件流的三个阶段

1. 捕获阶段

   • 发生时间：事件从 document 对象开始传播，逐层向下，直到目标元素（事件的实际目标）。
   • 过程：从最外层的 document 级别开始，逐步向下传递到目标元素的父元素、祖先元素，直到目标元素的事件处理程序开始接收事件。
   • 用途：这个阶段很少被使用，但可以用来拦截事件或进行预处理。

2. 目标阶段

   • 发生时间：事件到达目标元素时。
   • 过程：事件在目标元素上触发，并在目标元素上执行相应的事件处理程序。
   • 用途：这个阶段用于处理事件的实际目标元素上的处理程序。

3. 冒泡阶段

   • 发生时间：事件从目标元素开始向上冒泡，经过每一个父元素，最终到达 document 对象。
   • 过程：事件在目标元素上处理完后，事件会从目标元素逐级向上传递到 document 对象。每个父元素的事件处理程序都有机会处理这个事件。
   • 用途：这个阶段非常有用，尤其是在事件代理和处理多个相似事件时。

capture 参数

在 addEventListener 方法中，true 作为第三个参数用于指定事件处理程序的事件流阶段。这个参数称为 capture（捕获）或 useCapture。

• capture 参数 true：表示事件处理程序将会在事件的 捕获阶段 执行。
• false（默认值）：表示事件处理程序将在事件的 冒泡阶段 执行。

默认 capture 为 false。

<div class="father">
    <div class="son"></div>
</div>

const father = document.querySelector('.father');
const son = document.querySelector('.son');

father.addEventListener('click', function () {
    alert('我是爸爸');
}, true);

son.addEventListener('click', function (e) {
    alert('我是儿子');
}, true);

如果将 capture 参数设为 true，点击子元素会先弹出父级，再弹出子级；如果删除 capture 参数（默认 false），那么就先冒出子级，再弹出父级。

阻止冒泡：

// 阻止冒泡
e.stopPropagation();

事件解绑

const button = document.querySelector('button');
button.onclick = function () {
    alert('点击了');
};

// 解绑方式一
button.onclick = null;

// 解绑方式二 (匿名函数无法被解绑)
function fu() {
    alert('点击了');
}
button.addEventListener('click', fu);
button.removeEventListener('click', fu);

冒泡的好处

当我们点击子元素时，会冒泡到父级元素上，从而触发父元素的事件。

点击第几个 li，li 通过冒泡上升到父级，然后父级监听到被点击的子元素字体变红。

<ul>
    <li>我是第一个孩子</li>
    <li>我是第二个孩子</li>
    <li>我是第三个孩子</li>
    <li>我是第四个孩子</li>
    <li>我是第五个孩子</li>
</ul>
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
    e.target.style.color = 'red';
});
</script>

阻止表单默认提交行为

默认行为通常是向服务器发送表单数据并重新加载页面。通过阻止默认行为，可以防止这种情况发生，从而使表单在提交时不会刷新页面。

const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
    // 阻止默认行为
    e.preventDefault();
});

页面尺寸事件

scrollLeft 和 scrollTop

const element = document.querySelector('.scrollable');
console.log(element.scrollLeft); // 获取当前水平滚动位置
element.scrollLeft = 100; // 设置水平滚动位置为 100 像素
element.scrollTop = 100; // 设置垂直滚动位置为 100 像素

offsetLeft 和 offsetTop

用于获取元素相对于其最近的已定位祖先元素的偏移量（左上角）。

const element = document.querySelector('.box');
console.log(element.offsetLeft); // 获取元素的左边距
console.log(element.offsetTop); // 获取元素的上边距

clientWidth 和 clientHeight

用于获取元素的视口尺寸，不包括滚动条、边框或外边距。它们表示元素的可视区域的宽度和高度。

const element = document.querySelector('.box');
console.log(element.clientWidth); // 获取元素的可视宽度
console.log(element.clientHeight); // 获取元素的可视高度

offsetWidth 和 offsetHeight

用于获取元素的实际宽度和高度，包括元素的边框和内边距，但不包括外边距。

const element = document.querySelector('.box');
console.log(element.offsetWidth); // 获取元素的总宽度
console.log(element.offsetHeight); // 获取元素的总高度

日期对象

获得当前日期方法

const date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
console.log(date.getDay());

时间戳

时间戳通常指的是从 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）开始所经过的毫秒数。这种时间戳被称为 Unix 时间戳或 Epoch 时间戳。JavaScript 的 Date 对象提供了生成和操作时间戳的方法。

// 第一种获得时间戳方法（只能获得当前时间戳）
let time = Date.now();
console.log(time);

// 第二种可以获得指定时间的时间戳
console.log(+new Date());

// 第三种可以获得指定时间的时间戳
const date = new Date();
console.log(date.getTime());

BOM

BOM（Browser Object Model，浏览器对象模型）是一组与浏览器窗口交互的对象集合。BOM 主要包括了 window，location，history，navigator 等对象，它们提供了与浏览器窗口、历史记录、用户代理信息等交互的能力。

定时器函数

setInterval() 为定时器函数，每隔一段时间执行一次里面的函数。

function sayHello() {
    console.log("Hello, world!");
}
// 每隔 2000 毫秒（2 秒）执行一次 sayHello 函数
setInterval(sayHello, 2000);

取消定时器 clearInterval() 函数。

// 设置定时器，每隔 1000 毫秒（1 秒）执行一次
const intervalId = setInterval(sayHi, 1000);
// 取消定时器（例如：5 秒后停止）
setTimeout(() => {
    clearInterval(intervalId);
}, 5000);

location 对象

location.href 实现页面跳转。

let i = 5;
let timer = setInterval(function () {
    const span = document.querySelector('span');
    if(span) {
        span.innerHTML = i;
        i--;
        if (i === 0) {
            clearInterval(timer);
            // 5 秒之后实现跳转
            location.href = 'https://www.jd.com/error2.aspx';
        }
    }
}, 1000);

location.reload 实现页面更新。

const reload = document.querySelector('button');
reload.addEventListener('click', function () {
    location.reload();
});

history 对象

history.forward 页面的前进和后退功能。

<button>退</button>
<button>进</button>

const back = document.querySelector('button:first-child');
const forword = back.nextElementSibling;
back.addEventListener('click', function () {
    history.back();
});
forword.addEventListener('click', function () {
    history.forward();
});

localStorage 对象

通过 localStorage 对象可以将信息存到本地，即使当页面关闭时也存在，除非主动删除。

// 添加键值对
localStorage.setItem('test', 'dom');

得到本地信息内容

// 获取键值对
const value = localStorage.getItem('test');
console.log(value); // 输出 "dom"