【一】弹出框
- 是网页开发中常用的交互组件，用于显示警告、确认或提示，并于用户进行交互
1）警告框
-
用于向用户显示一条重要的警告信息
-
通常包含一个确认按钮用于关闭
alert("警告提示框")
2）确认框
-
用于向用户询问一个问题或确认某个操作
-
通常包含一个确认按钮和一个取消按钮
if(confirm("确认提示框")){ console.log("已确认") }else{ console.log("已取消") }
3）提示框
-
用于向用户展示一条信息，并等待用户输入数据
-
通常包含一个输入框和确认、取消按钮
prompt("请输入信息","默认值")
【二】计时器相关
- 既可以放在 body 内，也可放在 head 内
- 毫秒为单位
1）过一段时间触发
-
在经过一定的时间后触发某个操作
setTimeout(函数体,延迟时间)setTimeout( ()=>{console.log("延迟结束")}, 2000 )
2）每隔一段时间触发一次
-
每隔一定的时间重复触发某个操作
setInterval(函数体,延迟时间)setInterval( ()=>{console.log("延迟结束")}, 2000 )
3）清除定时器
1.clearTimeout
-
用于清除setTimeout函数设置的定时器
-
括号内填写指定的定时器定义的名称
clearTimeout();
2.clearInterval
-
用于取消setInterval函数设置的定时器
-
括号内填写指定的定时器定义的名称
clearInterval();
3.注意
-
在调用clearTimeout或clearInterval函数时
- 需要将原先保存的计时器标识符作为参数传递给这两个函数，以确保取消正确的定时器。
-
确保清除定时器
- 若不在需要定时器，应及时清除，避免资源浪费
-
考虑浏览器兼容性
- 在使用定时器时，应注意不同浏览器对定时器的支持会存在差异，可使用各种前端框架或库提供的方法方法处理兼容性问题
-
注意定时器的性能影响
- 频繁使用定时器会对页面性能产生一定的影响
【三】查找标签
1）直接查找标签（getElement）
1.getElementByld
-
根据元素的ID属性之间获取对应的HTML元素
-
拿到对象本身
document.getElementByld("ID值")
2.getElementsByTagName
-
根据标签名获取匹配的所有元素
-
拿到数组（容器）
document.getElementsByTagName("标签名")
3.getElementsByClassName
-
根据类名获取匹配的所有元素
-
拿到数组（容器）
document.getElementsByClassName("类名")
2）半间接查找标签
1.querySelector
-
返回第一个匹配的元素
document.querySelector("#ID值")
2.querySelectorAll
-
返回所有匹配的元素列表
document.querySelectorAll(".类名")
3.小结
- 选择器可以是标签名、ID、类名、属性等，更复杂的选择器可以选择嵌套结构
3）间接查找标签
1.parentElement
- 返回指定元素的父元素
- 可在DOM层次结构中向上导航
2.children
- 返回指定元素下的所有子元素组成的集合
- 此集合中不包含文本节点和其他元素节点
3.firstChild
- 返回当前标签下的文字
4.firstElementChild
- 返回指定元素下的第一个子元素
- 它只返回第一个子元素，忽略在它之前存在的任何非元素节点
5.lastElementChild
- 返回指定元素下的最后一个子元素
- 它仅包括最后一个元素作为其子节点，忽略在它之后的任何非元素节点
6.nextElementSibling
- 返回同级元素的下一个兄弟元素
- 允许在DOM中导航并访问特定元素的下一个兄弟元素
7.previousElementSibling
- 返回同级元素的上一个兄弟元素
- 许在DOM中导航并访问特定元素的上一个兄弟元素
【四】节点属性
- 是在文档对象模型中对节点进行创建、获取、修改、删除等操作
1）创建节点
// 创建一个指定标签
document.createElement("span")
// 创建一个指定内容的节点
document.createTextNode('内容')
// 创建一个空的片段批量插入多个节点
document.createDocumentFragment()
2）获取节点
// 根据元素的id属性获取对应的元素节点
getElementById("id值"):
// 根据元素的标签名获取一组元素节点
getElementsByTagName("标签名"):
// 根据元素的类名获取一组元素节点
getElementsByClassName("类名"):
// 使用CSS选择器获取匹配的第一个元素节点
querySelector(selector):
// 使用CSS选择器获取匹配的所有元素节点
querySelectorAll(selector):
3）修改节点
- node:根据元素获取的一组节点
// 将一个节点作为父节点的最后一个子节点添加到指定节点
node.appendChild(childNode)
// 从父节点中删除指定字节点
node.removeChild(childNode)
// 使用新节点替换旧节点
node.replace(newNode,oldNode)
// 在参考节点之前插入新节点
node.insertBefore(newNode, childNode)
4）属性操作
// 获取指定属性值
element.getAttribute(attribute)
// 设置指定属性的值
element.setAttribute(attribute, value)
//移除指定属性
element.removeAttribute(attribute):
5）文本操作
// 获取或设置节点的文本内容，文本带有标签内部的所有标签
node.textContent
// 获取或设置节点的HTML内容，只有文本没有标签
node.innerHTML
【五】获取值操作
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）获取文件
<body>
file <input type="file" name="upload" id="file_input">
</body>
let inputFileEle = document.getElementById("file_input")
inputFileEle.addEventListener("change", function () {
// 先获取到上传的文件
var fileData = inputFileEle.files;
// 遍历文件列表，并处理每个文件
for (var i = 0; i < fileData.length; i++) {
var file = fileData[i];
console.log("文件名：" + file.name);
console.log("文件类型：" + file.type);
console.log("文件大小（字节）：" + file.size);
console.log("最后修改时间：" + file.lastModified);
}
})
【六】属性操作
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属性获取类的名称
【七】事件
- 在计算机编程中
- 事件（Event）是指在程序执行期间发生的特定操作或状态变化
- 事件可以来自用户的交互操作（如点击、鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）
- 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作
1.鼠标事件
- click：鼠标点击事件
- mouseover：鼠标悬停在元素上的事件
- mouseout：鼠标离开元素事件
- mousedown：鼠标按下事件
- mouseup：识别松开事件
- mousemove：鼠标移动事件
2.键盘事件
- keydown：键盘按下事件
- keyup：键盘松开事件
- keypress：键盘按键按下后松开事件
3.表单事件
- submit：表单提交事件
- change：表单值改变事件
- focus：表单元素获取焦点事件
- blur：表单事件失去焦点事件
4.文档加载事件
- load：页面完全加载完成是事件
- unload：页面关闭或离开事件
5.定时器事件
- setTimeout：在指定的延迟时间后触发事件
- set interval：每隔一段时间触发一次事件
【八】绑定事件的方法
1）传统的事件属性绑定
-
通过在HTML标签中直接添加事件属性
-
这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式
<button onclick="myFunction()">点击我</button> <script> function myFunction() { alert("按钮被点击了！"); } </script>
2）现代的事件监听绑定
-
通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器
-
HTML和JavaScript代码会分离，提高了代码的可读性和可维护性
-
使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的
<button id="myButton">点击我</button> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("按钮被点击了！"); }); </script>