JavaScript 笔记 --- part 4 --- Web API (part 2)

news2025/4/21 14:04:28

(webAPI part2) DOM 基本操作

事件流

定义: 指的是事件完整执行过程中的流动路径
- 捕获阶段: 事件从最外层的窗口对象开始，逐层向内传播到目标元素，并触发相应的事件处理程序。
- 冒泡阶段: 事件从目标元素开始，逐层向外传播到最外层的窗口对象，并触发相应的事件处理程序。

事件捕获


document.addEventListener('click', function(event) {
  console.log('文档');
}, true)                // 第三个参数为true表示使用事件捕获, false表示使用事件冒泡, 默认为false

father.addEventListener('click', function(event) {
console.log('父亲');
}, true)

son.addEventListener('click', function(event) {
console.log('儿子');
}, true)

- 点击 son 元素，输出顺序为：文档、父亲、儿子。
- 点击 father 元素，输出顺序为：文档、父亲。
- 点击 document 元素，输出顺序为：文档。

事件冒泡


document.addEventListener('click', function(event) {
  console.log('文档');
})

father.addEventListener('click', function(event) {
console.log('父亲');
})

son.addEventListener('click', function(event) {
console.log('儿子');
})

- 点击 son 元素，输出顺序为：儿子、父亲、文档。
- 点击 father 元素，输出顺序为：父亲、文档。
- 点击 document 元素，输出顺序为：文档。

阻止冒泡: event.stopPropagation()

事件解绑

DOM.romoveEventListener("click", 函数名);

阻止元素默认行为

const form = duocument.querySelector("form");
form.addEventListener("submit", function (event) {
  event.preventDefault(); // 阻止默认提交行为
});

事件委托

定义: 将事件监听器添加到父元素上，当子元素触发事件时，元素通过事件冒泡机制将事件传递给父元素的事件监听器，从而实现事件的委托。
优点: 减少内存占用，提高性能。
原理: 利用事件冒泡，父元素的事件监听器可以监听到子元素的事件，从而实现事件的委托。

// 父元素
const ul = document.querySelector("ul");
ul.addEventListener("click", function (event) {
  // 子元素
  if (event.target.tagName === "LI") {
    // 判断点击的是不是子元素
    event.target.style.color = "blue"; //使用target属性获取触发事件的元素
    const id = event.target.dataset.id; // 使用dataset属性获取自定义属性值
  }
});

更多事件类型

页面加载事件: load / domcontentloaded

load: 页面加载完成时触发。

它不仅可以监听页面的加载完成，还可以监听页面的资源加载情况，比如图片、样式表、脚本等。

// 等待页面所有资源加载完毕, 就执行回调函数
window.addEventListener("load", function () {});

domcontentloaded: 页面 DOM 结构加载完成时触发。

它与 load 事件不同，它只会在 DOM 结构加载完成时触发，不会等待资源的加载。

// 等待DOM结构加载完成, 就执行回调函数
document.addEventListener("DOMContentLoaded", function () {});

元素滚动事件

可以个页面添加, 也可以给元素添加。

window.addEventListener("scroll", function (event) {
  consol.log("页面滚动了");
});

获取位置

scrollTop: 获取或设置当前页面的垂直滚动条的位置。(被卷去的部分)
scrollLeft: 获取或设置当前页面的水平滚动条的位置。

它们的值可读写, 类型为数字型

/*页面平滑滚动*/
html {
  scroll-behavior: smooth;
}

const div = document.querySelector("div");
window.addEventListener("scroll", function (event) {
  const n = document.documentElement.scrollTop;
  if (n > 100) {
    div.style.display = "block";
  }
});

页面尺寸事件

window.addEventListener("resize", function (event) {
  console.log("页面尺寸变化了");
});

获取尺寸

const div = document.querySelector("div");
console.log(div.clientWidth); // 盒子宽度
console.log(div.clientHeight); // 盒子高度

元素尺寸与位置

offsetwidth: 元素的宽度，包括内容宽度和内边距。(包括边框和间距)
offsetheight: 元素的高度，包括内容高度和内边距。
offsetTop: 元素相对于其定位父元素的上边缘的距离。(只读属性)
offsetLeft: 元素相对于其定位父元素的左边缘的距离。
- 若 3 和 4 的父元素无定位, 则找定位祖先元素, 直至 body 元素为止。
element.getBoundingClientRect(): 获取元素的边界框信息(相对于视口), 返回一个对象。

日期对象

实例化

const date = new Date(); // 当前日期和时间

const date1 = new Date(year, month, day, hours, minutes, seconds, milliseconds); // 指定日期和时间

方法

getFullYear(): 获取完整的年份。
getMonth(): 获取月份(0-11)。
getDate(): 获取日期(1-31)。
getDay(): 获取星期几(0-6)。
getHours(): 获取小时(0-23)。
getMinutes(): 获取分钟(0-59)。
getSeconds(): 获取秒(0-59)。
getMilliseconds(): 获取毫秒(0-999)。
getTime(): 获取从 1970 年 1 月 1 日午夜到当前时间的毫秒数。
getTimezoneOffset(): 获取时区偏移量。
setFullYear(year): 设置完整的年份。
setMonth(month): 设置月份(0-11)。
setDate(day): 设置日期(1-31)。
setHours(hours): 设置小时(0-23)。
setMinutes(minutes): 设置分钟(0-59)。
setSeconds(seconds): 设置秒(0-59)。
setMilliseconds(milliseconds): 设置毫秒(0-999)。
setTime(milliseconds): 设置从 1970 年 1 月 1 日午夜到指定时间的毫秒数。
toUTCString(): 将日期对象转换为 UTC 格式的字符串。
toDateString(): 将日期对象转换为日期格式的字符串。
toTimeString(): 将日期对象转换为时间格式的字符串。
toLocaleString(): 将日期对象转换为本地格式的字符串。

时间戳

定义: 时间戳是指格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒(北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒)起至现在的总秒数。
使用场景: 如果计算倒计时效果, 前面方法无法直接计算, 需要借助于时间戳完成。
算法:

获取当前时间戳:
- const timestamp = Date.now();
- const timestamp = +new Date();
- const timestamp = (new Date()).getTime();
计算倒计时:
- const d = parseInt(总秒数 / 60 / 60 / 24); 计算天数
- const h = parseInt((总秒数 / 60 / 60) % 24); 计算小时数
- const m = parseInt((总秒数 / 60) % 60); 计算分钟数
- const s = parseInt(总秒数 % 60); 计算秒数

节点操作

DOM节点: 指的是文档对象模型(Document Object Model)中的节点, 包括元素节点、属性节点、文本节点、注释节点等。

查找节点(根据元素之间的关系)

父节点查找: 子元素.parentNode, 返回值值为object, 找不到返回null
子节点查找: 父元素.children , 返回值值为array(仅包含子元素节点), 找不到返回空数组
兄弟节点查找: 元素.previousElementSibling(前一个兄弟节点) 或 元素.nextElementSibling(后一个兄弟节点), 返回值类型为object, 找不到返回null

创建节点(新增元素节点)

创建节点: document.createElement(标签名) , 返回值类型为object, 即新创建的元素节点
插入节点(方法一): 父元素.appendChild(新元素名) , 插入到最后
插入节点(方法二): 父元素.insertBefore(新元素名, 参照元素) , 插入到参照元素之前
克隆节点: 元素.cloneNode(true/false) , true表示深复制, false表示浅复制, 返回值类型为object, 即新创建的元素节点