查找标签,节点操作,事件,JS事件案例
Ⅰ查找标签
- 直接查找标签和间接查找标签是在Web开发中常用的两种方式。
- 操作页面的时候要使用document对象
【一 】直接查找标签getElement
【1】通过ID查找getElementById
- 根据元素的ID属性直接获取到对应的HTML元素。
（1）语法
// 通过ID查找
document.getElementById("ID值")
（2）示例
var element = document.getElementById("d4");
undefined
console.log(element)
// <div id="d4"> 3333 </div>
【2】通过class值找getElementsByClassName
- 根据标签名称获取匹配的所有元素。
（1）语法
document.getElementsByClassName("CLASS值")
（2）示例
var elements = document.getElementsByClassName("d1");
undefined
console.log(elements)
// HTMLCollection [div.d1]
【3】通过标签名找getElementsByTagName：
- 根据标签名称获取匹配的所有元素。
（1）语法
document.getElementsByTagName("div")
（2）示例
var elements = document.getElementsByTagName("div");
undefined
console.log(elements)
// HTMLCollection(3) [div.d1, div#d4, div.d2, d4: div#d4]
【4】html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
【5】小结
- 当我们在用变量名指代标签对象时，一般都建议写成
- xxxEle
- divEle
- aEle
- pEle
- 这些方法可以根据不同的需求和条件进行标签查找。
- 使用getElementById适合于查找单个具有唯一ID的元素
- getElementsByTagName和getElementsByClassName适合于查找多个相同标签名称或类名的元素。
- 需要注意的是，以上方法返回的是一个HTML元素或HTML元素列表（NodeList）
【二】半间接查找标签query
【1】id值查找querySelector
- document.querySelector方法返回第一个匹配选择器的元素
（1）语法
// 使用querySelector查询单个元素
document.querySelector("#id值")
（2）示例
// 使用querySelector查询单个元素
var element = document.querySelector("#d4");
undefined
console.log(element)
// <div id="d4"> 3333 </div>
【2】class 值查找querySelector
- document.querySelector方法返回第一个匹配选择器的元素
（1）语法
// 使用querySelector查询单个元素
document.querySelector(".class值")
（2）示例
// 使用querySelector查询单个元素
var element = document.querySelector(".d2");
undefined
console.log(element)
// <div class="d2"> 1111 </div>
【3】放标签名querySelectorAll
- document.querySelectorAll方法返回所有匹配选择器的元素列表。
（1）语法
// 使用querySelectorAll查询多个元素
var elements = document.querySelectorAll("div");
（2）示例
var elements = document.querySelectorAll("div");
undefined
console.log(elements)
// NodeList(3) [div.d1, div#d4, div.d2]
【4】html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
【5】小结
- 选择器可以是标签名称、类名、ID、属性等，更复杂的选择器甚至可以选择嵌套结构。
- 通过选择器查询，您可以更灵活地查找和操作HTML元素。
【三】间接查找标签
【1】返回指定元素的父元素parentElement
- parentElement属性返回指定元素的父元素。
- 它可以在DOM（文档对象模型）层次结构中向上导航。
- 例如，如果有一个元素< div id="parent">，element.parentElement将返回 < div>元素。
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.parentElement
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.parentElement
// <body>…</body>
【2】获取父标签下面的所有子标签children
- children属性返回指定元素的所有子元素组成的集合。
- 这个集合中不包括文本节点和其他非元素节点。
- 通过使用索引或循环，您可以对单个子元素进行访问和操作。
- 例如，element.children[]将返回指定元素的第一个子元素。
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.children
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.children
HTMLCollection(3) [div, p.p1, p]
【3】获取到当前标签下的文字firstChild
- 获取到当前标签下的文字firstChild
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.firstChild
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.firstChild
// "最外层第一个div [div] "
【4】获取当前标签下的第一个子标签firstElementChild
- firstElementChild属性指向指定元素的第一个子元素。
- 它类似于children属性，但它只返回第一个子元素，忽略在它之前存在的任何非元素节点。
- 例如，element.firstElementChild将返回指定元素的第一个子元素。
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.firstElementChild
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.firstElementChild
// <div> 第一个div 内的 第一个 div [div>div]</div>
【5】获取当前标签下的第一个子标签firstElementChild下的文字firstChild
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.firstElementChild.firstChild
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.firstElementChild.firstChild
// " 第一个div 内的 第一个 div [div>div]"
【6】指定元素的最后一个子元素lastElementChild
- 类似于firstElementChild，lastElementChild属性指向指定元素的最后一个子元素。
- 它仅包括最后一个元素作为其子节点，忽略在它之后的任何非元素节点。
- 例如，element.lastElementChild将返回指定元素的最后一个子元素。
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.lastElementChild
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.lastElementChild
// <p> 第一个div 内的 第二个 p [div>p] </p>
【7】指定元素后面的下一个兄弟元素nextElementSibling
- nextElementSibling属性返回紧跟在指定元素后面的下一个兄弟元素。
- 它允许您在DOM中导航并访问特定元素的下一个兄弟元素。
- 例如，如果在父容器中有多个元素，element.nextElementSibling将返回指定元素的下一个兄弟元素
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.nextElementSibling
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.nextElementSibling
// <div id="d4"> 3333 </div>
【8】获取同级标签的上一个标签previousElementSibling
- previousElementSibling属性类似于nextElementSibling，但它返回在指定元素之前出现的前一个兄弟元素。
- 它使您能够访问DOM层次结构中指定元素的前一个兄弟元素。
- 例如，element.previousElementSibling将返回指定元素的前一个兄弟元素。
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.previousElementSibling
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.previousElementSibling
// <div>最外层第一个div头顶上的 [div]</div>
【9】返回指定元素的父元素parentElement补充
- parentElement属性返回指定元素的父元素。
- divEleOne.parentElement.parentElement属性返回指定元素的父元素的父元素
1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.parentElement.parentElement
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.parentElement
// <body>…</body>
divEleOne.parentElement.parentElement
// <html lang="en"><head>…</head><body>…</body></html>
【10】html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>最外层第一个div头顶上的 [div]</div>
<div class="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 id="parent">
111
</div>
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
Ⅱ 节点操作
- 节点操作是指在文档对象模型（DOM）中对节点进行创建、获取、修改、删除等操作。
- 以下是几种常见的节点操作：
【一】创建节点：
// 总览
createElement(tagName): 创建一个具有指定标签名的元素节点。
createTextNode(text): 创建一个包含指定文本内容的文本节点。
createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。
【1】创建指定的标签
- 创建一个具有指定标签名的元素节点
（1）语法
document.createElement(tagName)
（2）示例
document.createElement('div')
// <div></div>
【2】创建指定文本内容的节点
- 创建一个包含指定文本内容的文本节点
（1）语法
document.createTextNode(text)
（2）示例
document.createTextNode("111")
// "111"
【3】创建一个空的片段批量插入多个节点
- 创建一个空的文档片段节点，可用于高效地插入多个节点。
document.createDocumentFragment()
【二】获取节点
// 总览
getElementById(id): 根据元素的id属性获取对应的元素节点。
getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
getElementsByClassName(className): 根据元素的类名获取一组元素节点。
querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。
【1】根据元素的id属性获取对应的元素节点document.getElementById()
（1）语法
document.getElementById(id);
（2）示例
var myElement = document.getElementById('d4');
undefined
console.log(myElement)
// <div id="d4"> 3333 </div>
（3）html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
【2】使用CSS选择器获取匹配的第一个元素节点document.querySelector()
（1）语法
var myElement = document.querySelector(selector);
（2）示例
var myElement = document.querySelector('.d4');
undefined
console.log(myElement)
// <div class="d4"> 3333 </div>
（3）html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d4">
3333
</div>
<div class="d4">
1111
</div>
</body>
</html>
【三】修改节点
node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
parent.removeChild(childNode): 从父节点中移除指定子节点。
node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。
【1】追加节点
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
// 创建一个节点
let childNode = document.createElement('div')
// 再将节点作为当前标签的最后一个儿子元素插入进去
divEleOne.appendChild(childNode)
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
console.log(divEleOne)
// <div class="d1">…</div>
undefined
let childNode = document.createElement('div')
undefined
divEleOne.appendChild(childNode)
// <div></div>
【2】删除节点
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
// 创建一个节点
let childNode = document.createElement('div')
// 再将节点作为当前标签的最后一个儿子元素插入进去
divEleOne.appendChild(childNode)
// 将当前子节点删除
divEleOne.removeChild(childNode)
（2）示例
divEleOne.removeChild(childNode)
<div></div>
【3】替换子节点
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
// 创建一个节点
let childNode = document.createElement('div')
// 再将节点作为当前标签的最后一个儿子元素插入进去
divEleOne.appendChild(childNode)
let childNodeOne = document.createElement('span')
// 将新的节点标签替换旧的节点标签
divEleOne.replaceChild(childNodeOne, childNode)
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
let childNode = document.createElement('div')
undefined
divEleOne.appendChild(childNode)
<div></div>
let childNodeOne = document.createElement('span')
undefined
divEleOne.replaceChild(childNodeOne, childNode)
// <div></div>
【4】HTML代码负责【1】【2】【3】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
【5】按照位置插入节点
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
// 创建一个节点
let childNode = document.createElement('div')
divEleOne.appendChild(childNode)
// 按照位置插入节点
let pEleOne = document.getElementById("d6")
// 在子节点上面追加一个新的节点
divEleOne.insertBefore(childNode, pEleOne)
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
let childNode = document.createElement('div')
undefined
divEleOne.appendChild(childNode)
<div></div>
let pEleOne = document.getElementById("d6")
undefined
divEleOne.insertBefore(childNode, pEleOne)
<div></div>
let childNode = document.createElement('div')
undefined
divEleOne.appendChild(childNode)
<div></div>
【6】HTML代码只负责【5】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
<p id="d6">7777</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
1111
</div>
</body>
</html>
【四】修改节点属性
element.getAttribute(attribute): 获取指定属性的值。
element.setAttribute(attribute, value): 设置指定属性的值。
element.removeAttribute(attribute): 移除指定属性
【1】获取指定属性值
（1）语法
// 获取指定属性值
let imgEle = document.getElementById("girl")
imgEle.getAttribute("src")
（2）示例
let imgEle = document.getElementById("girl")
undefined
imgEle.getAttribute("src")
'https://ww1.sinaimg.cn/mw690/732352aaly1hqc31a738oj222o340b2a.jpg'
【2】设置指定的属性值
（1）语法
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.setAttribute("style", "color : red;")
let imgEle = document.getElementById("girl")
imgEle.setAttribute("width", "400px")
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.setAttribute("style", "color : red;")
undefined
let imgEle = document.getElementById("girl")
undefined
imgEle.setAttribute("width", "400px")
undefined
【3】移除制定的属性值
（1）语法
divEleOne.removeAttribute("style")
（2）示例
divEleOne.removeAttribute("style")
undefined
【4】手动创建img标签
（1）语法
let imgEleOne = document.createElement("img")
// 获取到制定的节点可以属性名=属性值设置相关的属性
imgEleOne.src = "https://img1.baidu.com/it/u=3753266459,121061334&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1371"
// 通过 setAttribute 设置属性名和属性名和属性值
imgEleOne.setAttribute("width", "400px")
imgEleOne.setAttribute("height", "600px")
let divEleOne = document.getElementsByClassName("d1")[0]
divEleOne.appendChild(imgEleOne)
（2）示例
let imgEleOne = document.createElement("img")
undefined
imgEleOne.src = "https://img1.baidu.com/it/u=3753266459,121061334&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1371"
imgEleOne.setAttribute("width", "400px")
undefined
imgEleOne.setAttribute("height", "600px")
undefined
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.appendChild(imgEleOne)
<img src="https://img1.baidu.com/it/u=3753266459,121061334&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1371" width="400px" height="600px">
【5】HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
<img src="https://ww1.sinaimg.cn/mw690/732352aaly1hqc31a738oj222o340b2a.jpg" id="girl" alt="">
1111
</div>
</body>
</html>
【五】文本操作
- node.textContent: 获取或设置节点的文本内容。
- node.innerHTML: 获取或设置节点的HTML内容。
【六】补充innerText/innerHTML
（1）语法
// 先获取节点
let divEleOne = document.getElementsByClassName("d1")[0]
// 获取节点的文本 文本带有标签内部的所有标签
divEleOne.innerHTML
// 获取节点的文本 只有文本没有标签
divEleOne.innerText
（2）示例
let divEleOne = document.getElementsByClassName("d1")[0]
undefined
divEleOne.innerHTML
'\n <p class="d3">你想干啥</p>\n111\n'
divEleOne.innerText
'你想干啥\n\n111'
（3）HTML代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
<!--<img src="https://ww1.sinaimg.cn/mw690/732352aaly1hqc31a738oj222o340b2a.jpg" id="girl" alt="">-->
1111
</div>
username : <input type="text" name="username" value="username">
file <input type="file" id="file_input">
</body>
</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属性来获取用户输入的值。
（1）语法
// 示例：获取id为myInput的input元素的值
let inputEle = document.getElementsByTagName("input")[0]
var inputValue = inputEle.value;
console.log(inputValue);
（2）示例
let inputEle = document.getElementsByTagName("input")[0]
undefined
inputEle.value;
'username'
var inputValue = inputEle.value;
undefined
console.log(inputValue);
VM37:1 username
undefined
【4】获取文件
- 当用户选择一个或多个文件后
- 可以通过访问.files属性来获取这些文件的信息。
- .files属性返回一个FileList对象
- 其中包含了所选文件的列表。
- 可以通过遍历该列表来处理每个文件。
- 以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：
（1）语法
let inputFileEle = document.getElementById("file_input")
inputFileEle.addEventListener("change", function () {
// 先获取到上传的文件
var fileData = inputFileEle.files;
// console.log(fileData)
// 遍历文件列表，并处理每个文件
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);
}
})
（2）示例
let inputFileEle = document.getElementById("file_input")
undefined
inputFileEle.addEventListener("change", function () {
// 先获取到上传的文件
var fileData = inputFileEle.files;
// console.log(fileData)
// 遍历文件列表，并处理每个文件
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);
}
})
undefined
VM46:9 文件名：微信图片_20240613230851.jpg
VM46:10 文件类型：image/jpeg
VM46:11 文件大小（字节）：7547
VM46:12 最后修改时间：1718291335868
- 在以上示例中，我们首先获取具有id="fileInput"的文件选择框的DOM元素，并为其添加了一个change事件监听器。
- 当用户选择文件后，change事件将被触发。
- 在事件处理程序中，我们使用.files属性获取选择的文件列表，并遍历该列表。
- 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。
- 需要注意的是，.files属性在非IE浏览器中提供了广泛的支持
- 但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。
【5】HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1">
<p class="d3">你想干啥</p>
111
</div>
<div id="d4">
3333
</div>
<div class="d2">
<!--<img src="https://ww1.sinaimg.cn/mw690/732352aaly1hqc31a738oj222o340b2a.jpg" id="girl" alt="">-->
1111
</div>
username : <input type="text" name="username" value="username">
file <input type="file" id="file_input">
</body>
</html>
【八】属性操作
【1】class属性操作
- .classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
- 它返回一个DOMTokenList对象，该对象包含了元素的所有类名。
（1）语法
// 获取到制定的节点标签
let divEle = document.getElementById("dd1")
// 批量获取当前节点标签的class值
let classList = divEle.classList
// 检查是否包含某个类名
// contains : 判断某个值是否存在
classList.contains("d1")
classList.contains("d2")
// 添加类名
classList.add("ddd5")
// 移除类名
classList.remove("ddd5")
// 切换类名 有则删除 无则添加
classList.toggle("ddd6")
（2）示例
let divEle = document.getElementById("dd1")
undefined
let classList = divEle.classList
undefined
classList.contains("d1")
true
classList.contains("d2")
false
classList.add("ddd5")
undefined
classList.remove("ddd5")
undefined
classList.toggle("ddd6")
true
（3）HTML代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1 d3 d4 d5" id="dd1"> div d1
<p id="p1">
p p1
</p>
<p id="p3">
p p1
</p>
<p id="p4">
p p1
</p>
</div>
<!--<img src="https://img1.baidu.com/it/u=3753266459,121061334&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1371" id="girl" alt="">-->
<div class="d2">
<p id="p2"></p>
</div>
username : <input type="text" name="username" value="username">
file <input type="file" id="file_input">
</body>
</html>
【2】标签样式
- 看案例
【案例】
（1）类属性操作
<!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
（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>
<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）是指在程序执行期间发生的特定操作或状态变化。
- 事件可以来自用户的交互操作（如点击、鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
- 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。
【一】鼠标事件：
- click：鼠标点击事件。
- mouseover：鼠标悬停在元素上的事件。
- mouseout：鼠标离开元素的事件。
- mousedown：鼠标按下事件。
- mouseup：鼠标松开事件。
- mousemove：鼠标移动事件。
【二】键盘事件
- keydown：键盘按下事件。
- keyup：键盘松开事件。
- keypress：键盘按键被按下并松开事件。
【三】表单事件：
- submit：表单提交事件。
- change：表单值改变事件。
- focus：表单元素获取焦点事件。
- blur：表单元素失去焦点事件。
【四】文档加载事件：
- load：页面完全加载完成事件。
- unload：页面关闭或离开事件。
【五】定时器事件
- setTimeout：在指定的延迟时间后触发事件。
- setInterval：每隔一定时间触发事件。
【六】自定义事件：
- 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。
【七】绑定事件的两种方式
【1】传统的事件属性绑定
- 这种方式是通过在HTML标签中直接添加事件属性来实现事件绑定。
- 例如，我们可以在一个按钮的onclick属性中指定一个JavaScript函数，当按钮被点击时，该函数会被调用。
先在 script 标签内定义一个函数 绑定给标签身上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="b1">按钮</button>
<script>
let buttonEle = document.getElementById("b1")
function clickEvent() {
window.alert("我被点击了!")
}
buttonEle.addEventListener("click", clickEvent)
</script>
</body>
</html>
- 以上示例代码中，当id为"b1"的按钮被点击时，会触发点击事件，并弹出一个提示框。
- 在上述示例中，当按钮被点击时，会调用名为clickEvent的JavaScript函数，并弹出一个提示框。
- 这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式。
【2】现代的事件监听绑定
- 这种方式是通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。
- HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。
给指定的节点增加事件监听
（1）语法
let buttonEle = document.getElementById("b1")
function clickEvent() {
window.alert("我被点击了!")
}
buttonEle.addEventListener("click", clickEvent)
- 在上述示例中，通过getElementById方法获取id为"b1"的按钮元素，然后使用addEventListener方法绑定了一个点击事件监听器。
- 当按钮被点击时，会执行回调函数，并弹出一个提示框。
- 使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的。
（2）示例
let buttonEle = document.getElementById("b1")
undefined
function clickEvent() {
window.alert("我被点击了!")
}
buttonEle.addEventListener("click", clickEvent)
undefined
（3）html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="b1">按钮</button>
</body>
</html>
Ⅳ JavaScript之JS事件案例
【一】开关灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.normal {
width: 400px;
height: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="normal bg_red bg_green" id="d1">
</div>
<button id="b1"> 点我切换</button>
<script>
let divEle = document.getElementById("d1")
// 先获取 button 按钮
let buttonEle = document.getElementById("b1")
// 添加点击事件
buttonEle.addEventListener("click", () => {
let classList = divEle.classList
// 有则删除 无则添加
classList.toggle("bg_red")
// 这种方法也可以但是代码太过冗余
// let nowColor = divEle.getAttribute("class")
// if (nowColor.indexOf("bg_red") !== -1) {
// divEle.removeAttribute("class")
// divEle.setAttribute("class", "normal bg_green")
// }else{
// divEle.removeAttribute("class")
// divEle.setAttribute("class", "normal bg_red")
// }
})
</script>
</body>
</html>
【二】input框获取/失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="去吗?" id="d1">
<script>
let inputEle = document.getElementById("d1");
// 获取焦点事件
inputEle.onfocus = function () {
// 将input框内部的值去除
inputEle.value = '';
// .value : 获取框内的值
// = ：赋值
}
// 失去焦点事件
inputEle.onblur = function () {
// 给input框内的标签重写赋值
inputEle.value = "再说"
}
</script>
</body>
</html>
【三】实时展示当前时间
【1】基础打印当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<script>
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// （1） 访问页面之后，将访问的时间显示到input框当中
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
// （2）加载完页面触发事件：打印当前时间
showTime()
</script>
</body>
</html>
【2】升级设置触发事件实时更新
设置触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<script>
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
// 触发事件：打印当前时间
setInterval(showTime, 100)
</script>
</body>
</html>
【3】最终可以暂停可以实时更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>
<script>
// 定义一个全局标量存储定时器
let t = null;
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// 拿到两个按钮所在的标签
let startEle = document.getElementById("b1");
let endEle = document.getElementById("b2");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
// （3） 页面上加两个控制按钮。开始和结束
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
startEle.onclick = function () {
if (!t) {
// 触发事件：打印当前时间
t = setInterval(showTime, 100);// 每点击一次生成一个定时器，但是t值复制给最后一个定时器
}
}
endEle.onclick = function () {
clearInterval(t);
// 重置为空
t = null;
}
</script>
</body>
</html>
【四】省市联动
后者会根据前者展示对应的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="s2"></select>
<script>
// 模拟数据
data = {
"河北省": ["廊坊", "邯郸", "保定"],
"北京": ["朝阳区", "海淀区", "遵化市"],
"山东": ["威海市", "烟台市"],
"台湾": ["台北市", "高雄市"],
"香港": ["中西区", "东区"],
"江西": ["南昌市", "九江市"],
"黑龙江": ["哈尔滨市", "齐齐哈尔市"]
};
// 拿到两个select对象
let proEle = document.getElementById("s1");
let cityEle = document.getElementById("s2");
// for 循环 取键
for (let key in data) {
// 将省做成一个个标签，添加到第一个select中
// (1) 创建option标签
let opEle = document.createElement("option");
// (2) 设置属性
opEle.innerText = key
// (3) 设置值
opEle.value = key
// -----> <option value="省">省</option>
// (4) 将创建好的标签添加到第一个选项框中
proEle.appendChild(opEle)
}
// 文本域变化事件 --- change 事件
proEle.onchange = function () {
// （1） 先获取到用户选择的省份
let currentPro = proEle.value;
// (2) 获取对应的市
let currentCityList = data[currentPro];
// 清空市中全部的信息
cityEle.innerHTML = '';
// 加一个请选择框
let oppEle = '<option selected disabled>--请选择--</option>'
cityEle.innerHTML = oppEle
// (3) for 循环 将所有的市渲染到第二个标签
for (let i = 0; i < currentCityList.length; i++) {
let currentCity = currentCityList[i];
// (1) 创建option标签
let proEle = document.createElement("option");
// (2) 设置属性
proEle.innerText = currentCity
// (3) 设置值
proEle.value = currentCity
// -----> <option value="省">省</option>
// (4) 将创建好的标签添加到第一个选项框中
cityEle.appendChild(proEle)
}
}
</script>
</body>
</html>
