当前位置：首页 > wzjs >正文

温州制作网站网站seo优化网站

wzjs 2025/9/14 15:10:32

温州制作网站,网站seo优化网站,吕梁建站公司,wordpress 简单企业主题下载地址(webAPI part2) DOM 基本操作事件流定义: 指的是事件完整执行过程中的流动路径捕获阶段: 事件从最外层的窗口对象开始，逐层向内传播到目标元素，并触发相应的事件处理程序。冒泡阶段: 事件从目标元素开始，逐层向外传播到最外层的窗口对象…

(webAPI part2) DOM 基本操作

事件流

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

事件捕获


document.addEventListener('click', function(event) {console.log('文档');
}, true)                // 第三个参数为true表示使用事件捕获, false表示使用事件冒泡, 默认为falsefather.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属性获取自定义属性值}
});

日期对象

实例化

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, 即新创建的元素节点