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

JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础实战

news 来源：原创 2025/5/17 12:16:14

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
笔记来源：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础&实战

JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础&实战

❤️DOM简介
- 🔥事件
- 🔥文档的加载
❤️DOM查询
- 🔥节点
- 🔥节点的属性
- - 1️⃣ `getElementById(id)`
  - 2️⃣ `getElementsByTagName(tagName)`
  - 3️⃣ `getElementsByName(name)`
  - 4️⃣ `innerHTML`
  - 5️⃣ 直接获取元素属性
  - 6️⃣ `className` 获取 `class` 属性
- 🔥练习：图片切换⭐️
- 🔥元素节点的子节点
- - 1️⃣ `getElementsByTagName(tagName)`
  - 2️⃣ `childNodes`
  - 3️⃣ `children`（推荐使用 ✅）
  - 4️⃣ `firstChild`
  - 5️⃣ `firstElementChild`（更精准 ✅）
  - 6️⃣ `lastChild`
- 🔥获取父节点和兄弟节点
- - 1️⃣ 获取父节点
  - - 📌 `parentNode`
  - 2️⃣ 获取兄弟节点
  - - 📌 `previousSibling`
    - 📌 `nextSibling`
  - 3️⃣ 获取前后兄弟元素（推荐 ✅）
  - - 📌 `previousElementSibling`（推荐 ✅）
    - 📌 `nextElementSibling`（推荐 ✅）
  - 4️⃣ 获取元素文本
  - - 📌 `innerText`
- 🔥练习：全选/全不选/反选⭐️
- 🔥查询剩余属性、方法
- - 1️⃣ 查询 `document` 相关属性
  - - 📌 `body`
    - 📌 `documentElement`
    - 📌 `all` ❌
  - 2️⃣ 查询元素的方法
  - - 📌 `getElementsByClassName()`
    - 📌 `querySelector()`
    - 📌 `querySelectorAll()`
❤️DOM增删改
- 🔥相关语法
- - 1️⃣ 创建新节点
  - - 📌 `document.createElement(tagName)` —— 创建一个元素节点
    - 📌 `document.createTextNode(text)` —— 创建文本节点
  - 2️⃣ 添加、插入、替换、删除节点
  - - `appendChild()` —— 添加子节点
    - 📌 `insertBefore()`—— 在指定子节点前插入新节点
    - 📌 `replaceChild()` —— 替换子节点
    - 📌 `removeChild()`—— 删除子节点
  - 💡 实战
- 🔥练习：添加删除记录⭐️
❤️操作CSS样式
- 🔥操作内联样式
- 🔥获取元素当前显示样式
- 🔥其他样式操作的属性
- - 1️⃣ client、offset、scroll 的区别
  - 2️⃣ 获取元素可见尺寸
  - - 📌 `clientWidth` 和 `clientHeight` —— 可见区域尺寸
    - 📌`offsetWidth` 和 `offsetHeight` —— 包括边框
  - 3️⃣ 获取元素偏移量
  - - 📌`offsetParent` —— 获取定位父元素
    - 📌`offsetLeft` 和 `offsetTop` —— 元素相对定位父元素的偏移量
  - 4️⃣ 获取滚动信息
  - - 📌`scrollWidth` 和 `scrollHeight` —— 整个滚动区域
    - 📌`scrollLeft` 和 `scrollTop` —— 获取滚动距离
  - 5️⃣ 实战案例
  - 6️⃣ 总结
- 🔥练习：垂直滚动条滚动到底时使表单项可用⭐️

！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！！重要！

❤️DOM简介

DOM：Document Object Model，文档对象。
- JS通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档：就是整个HTML网页文档。
对象：对象表示将网页中的每一部分都转换为了一个对象。[为了纯面向对象]
模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

在这里插入图片描述

🔥事件

事件，就是文档或浏览器窗口中发生的些特定的交互瞬间。
JavaScript 与 HTML 之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等

属性	此事件发生在何时…
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。
。。。	。。。

🔥文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。
如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			window.onload = function(){ // 使得页面加载结束执行 ，
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};	
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>  
	</body>
</html>

在这里插入图片描述

❤️DOM查询

🔥节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
节点的类型不同，属性和方法也都不尽相同。
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容

在这里插入图片描述

在 JavaScript 的 DOM（文档对象模型）中，节点（Node） 和 元素（Element） 是两个不同的概念，但它们密切相关。以下是它们的区别及联系：

1️⃣ 节点（Node）
在 DOM 中，节点（Node）有 12 种类型（常用的有 4 种）：

节点类型	数值	说明	例子
`ELEMENT_NODE`	`1`	元素节点	`<div>、<p>、<span>`
`TEXT_NODE`	`3`	文本节点	`"Hello"`（文本内容）
`ATTRIBUTE_NODE`	`2`	属性节点	`id="title"`
`COMMENT_NODE`	`8`	注释节点	`<!-- 这是注释 -->`

📌 获取节点的 nodeType

var div = document.querySelector("div");
console.log(div.nodeType); // 输出 1（ELEMENT_NODE）

var text = div.firstChild;
console.log(text.nodeType); // 输出 3（TEXT_NODE）

2️⃣ 元素（Element）

元素是 HTML 标签（Element Node），即 ELEMENT_NODE 类型的节点。

📌 常见的元素

<div id="box">Hello</div>

<div> 是元素，它也是节点，但它不包括文本、属性等其他节点类型。

📌 获取元素

var el = document.getElementById("box");
console.log(el.nodeType); // 输出 1（ELEMENT_NODE）
console.log(el.nodeName); // 输出 "DIV"

区别	节点（Node）	元素（Element）
概念	DOM 树的所有单元（包括元素、文本、注释等）	只指 `ELEMENT_NODE`（HTML 标签）
类型	12 种节点类型（常见：元素、文本、属性、注释）	只属于 `ELEMENT_NODE` 类型
包含范围	更广泛，包括文本、属性等	只包含 HTML 标签
访问方式	`childNodes` 获取所有子节点	`children` 获取所有子元素（不包括文本）

📌 示例

<div id="box">
    Hello <span>World</span>
</div>

var box = document.getElementById("box");

// 🔹 获取所有子节点（包含文本）
console.log(box.childNodes); // NodeList(3): [Text, <span>, Text]

// 🔹 获取所有子元素（不包含文本）
console.log(box.children); // HTMLCollection(1): [<span>]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			//浏览器已经为我们提供文档节点，文档节点代表的是整个网页
			console.log(document);
			//获取到button对象
			var btn = document.getElementById("btn");
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>

在这里插入图片描述

🔥节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	`文本内容`

🔥 JavaScript 获取元素节点

在 JavaScript 中，我们可以使用 DOM（文档对象模型） 来访问和操作 HTML 页面中的元素。下面是几个常用的 DOM 方法 及属性解析。🚀

getElementById()
- 通过id属性获取一个元素节点对象
getElementsByTagName()
- 通过标签名获取一组元素节点对象
getElementsByName()
- 通过name属属性获取一组元素节点对象

1️⃣ `getElementById(id)`

作用：通过 id 获取 唯一的元素 节点对象。

📌 语法：

document.getElementById("id值");

✅ 示例

<p id="demo">Hello, JavaScript!</p>
<script>
    var element = document.getElementById("demo");
    console.log(element.innerHTML); // 输出: Hello, JavaScript!
</script>

2️⃣ `getElementsByTagName(tagName)`

作用：通过 标签名 获取 一组元素（返回的是类数组）。

📌 语法：

document.getElementsByTagName("标签名");

✅ 示例

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
    var elements = document.getElementsByTagName("p");
    console.log(elements[0].innerHTML); // "Paragraph 1"
    console.log(elements[1].innerHTML); // "Paragraph 2"
</script>

🔹 重要

即使查询到的元素只有一个，也会返回一个数组（HTMLCollection）。
需要通过索引（[index]）来访问具体元素。

3️⃣ `getElementsByName(name)`

作用：通过 name 属性获取 一组元素节点对象（常用于表单元素）。

📌 语法：

document.getElementsByName("name值");

✅ 示例

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<script>
    var radios = document.getElementsByName("gender");
    console.log(radios.length); // 输出 2
</script>

4️⃣ `innerHTML`

作用：获取或修改 HTML 元素的内容（包括 HTML 标签）。

📌 语法：

元素.innerHTML = "新内容";

✅ 示例

<div id="test">Hello</div>
<script>
    var div = document.getElementById("test");
    console.log(div.innerHTML); // "Hello"
    div.innerHTML = "<b>World</b>"; // 修改内容
    console.log(div.innerHTML); // "<b>World</b>"
</script>

在这里插入图片描述

5️⃣ 直接获取元素属性

如果只想获取元素的属性值，不需要 innerHTML，可以直接使用 元素.属性名。

例如：

document.getElementById("inputId").value;  // 获取 input 的值
document.getElementById("divId").id;       // 获取 div 的 id
document.getElementById("inputId").name;   // 获取 input 的 name

✅ 示例

<input id="myInput" type="text" name="username" value="admin">
<script>
    var input = document.getElementById("myInput");
    console.log(input.value);  // "admin"
    console.log(input.name);   // "username"
</script>

6️⃣ `className` 获取 `class` 属性

🚨 注意：class 不能直接使用 元素.class 访问，而要使用 元素.className。

📌 语法：

元素.className = "新class值";

✅ 示例

<div id="box" class="old-class">内容</div>
<script>
    var div = document.getElementById("box");
    console.log(div.className); // "old-class"
    div.className = "new-class"; // 修改 class
    console.log(div.className); // "new-class"
</script>

在这里插入图片描述

🔥 总结

方法/属性	作用	返回值	用法示例
`getElementById(id)`	通过 `id` 获取唯一元素	单个 DOM 节点	`document.getElementById("demo")`
`getElementsByTagName(tag)`	通过标签名获取元素	类数组（HTMLCollection）	`document.getElementsByTagName("p")`
`getElementsByName(name)`	通过 `name` 获取元素	类数组（NodeList）	`document.getElementsByName("gender")`
`innerHTML`	读取/修改元素内容（包括 HTML 代码）	字符串	`element.innerHTML = "<b>Hello</b>"`
`元素.属性名`	获取元素属性值	字符串	`element.value`、`element.id`
`className`	读取/修改 `class`	字符串	`element.className = "new-class"`

🎯 常见用途

获取用户输入值：

var userInput = document.getElementById("username").value;

修改 HTML 内容：

document.getElementById("title").innerHTML = "Welcome!";

改变 CSS 样式：

document.getElementById("box").className = "new-style";

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 节点属性示例</title>
</head>
<body>
    <div id="myDiv" class="container">Hello, World!</div>

    <script>
        // 获取具有特定id的元素
        var divElement = document.getElementById("myDiv");

        // 访问节点的属性
        console.log(divElement.id); // 输出：myDiv
        console.log(divElement.className); // 输出：container
        console.log(divElement.innerHTML); // 输出：Hello, World!
    </script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>DOM查询</title>
		<style>
			body {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
			}

			button {
				width: 300px;
				margin-bottom: 10px;
			}

			#btnList {
				float:left;
			}

			#total{
				width: 450px;
				float:left;
			}

			ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}

			.inner li{
				border-style: solid;
				border-width: 1px;
				padding: 5px;
				margin: 5px;
				background-color: #99ff99;
				float:left;
			}

			.inner{
				width:400px;
				border-style: solid;
				border-width: 1px;
				margin-bottom: 10px;
				padding: 10px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			//定义一个函数，专门用来为指定元素绑定单击响应函数
			//参数：
			//idStr 要绑定单击响应函数的对象的id属性值
			//fun 事件的回调函数，当单击元素时，该函数将会被触发
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
			window.onload = function(){
<---!------------------------------------------------------------------------------------>
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
<---!------------------------------------------------------------------------------------>
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
<---!------------------------------------------------------------------------------------>
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					alert(inputs.length);
					for(var i=0 ; i<inputs.length ; i++){
						//innerHTML用于获取元素内部的HTML代码
						alert(inputs[i].innerHTML);
						alert(inputs[i].className);
					}
				};
<---!------------------------------------------------------------------------------------>
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					//获取id为city的元素
					var city = document.getElementById("city");
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
<---!------------------------------------------------------------------------------------>
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					var cns = city.childNodes;
					alert(cns.length);
					for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}
					
					//children属性可以获取当前元素的所有子元素
					var cns2 = city.children;
					alert(cns2.length);
				};
<---!------------------------------------------------------------------------------------>
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					fir = phone.firstElementChild;
					alert(fir);
				};
<---!------------------------------------------------------------------------------------>
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					//innerText，该属性可以获取到元素内部的文本内容
					//它和innerHTML类似，不同的是它会自动将html去除
					alert(pn.innerText);
				});
				
<---!------------------------------------------------------------------------------------>
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					//获取id为android的元素
					var and = document.getElementById("android");
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					var pe = and.previousElementSibling;
					alert(ps);
					
				});
<---!------------------------------------------------------------------------------------>
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
<---!------------------------------------------------------------------------------------>
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					um.value = "今天天气真不错~~~";
				});
				
<---!------------------------------------------------------------------------------------> 
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
				});
			};
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

在这里插入图片描述

🔥练习：图片切换⭐️

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				font-family: 'Courier New', Courier, monospace;
				background-color: papayawhip;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//点击按钮切换图片
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				//要切换图片就是要修改img标签的src属性
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					//切换到上一张，索引自减
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					//切换到下一张是index自增
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/1.jpg" alt="冰棍" />
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>

🔥元素节点的子节点

在 JavaScript DOM 操作中，我们常常需要访问 某个元素的子元素或子节点，以下是常用的方法及属性解析：🚀

1️⃣ `getElementsByTagName(tagName)`

作用：返回 当前节点的所有子节点（根据标签名获取）。

📌 语法：

元素.getElementsByTagName("标签名");

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    var list = document.getElementById("list");
    var items = list.getElementsByTagName("li"); // 获取所有 <li> 子元素
    console.log(items.length); // 3
    console.log(items[0].innerHTML); // "Item 1"
</script>

🔹 重要

返回的是 HTMLCollection（类数组），需要使用索引访问。
只能获取指定标签的子节点。

2️⃣ `childNodes`

作用：

属性，返回 所有子节点（包括文本、注释、标签等）。
空白字符（换行、空格）也会被当成文本节点（不同浏览器可能有所区别）。

📌 语法：

元素.childNodes;

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    var list = document.getElementById("list");
    console.log(list.childNodes.length);
    console.log(list.childNodes);
</script>

在这里插入图片描述

🔹 注意

IE8 及以下不会将空白文本当成节点，其他浏览器会。

3️⃣ `children`（推荐使用 ✅）

作用：

属性，返回当前元素的所有子元素（不包括文本、注释节点）。
比 childNodes 更干净，更常用于遍历子元素。

📌 语法：

元素.children;

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    var list = document.getElementById("list");
    console.log(list.children); // HTMLCollection(3) 只包含 <li>
</script>

在这里插入图片描述

🔹 推荐使用

适用于大多数情况下的 获取子元素 操作。
不会受到 空白文本节点 的影响。

4️⃣ `firstChild`

作用：

属性，返回当前节点的第一个子节点（可能是文本、注释或标签）。
空白文本也可能被当成第一个子节点。

📌 语法：

元素.firstChild;

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>
    var list = document.getElementById("list");
    console.log(list.firstChild); // 可能是文本（换行）
    console.log(list.firstChild.nodeType); // 3（文本节点）
</script>

在这里插入图片描述

5️⃣ `firstElementChild`（更精准 ✅）

作用：

属性，返回当前元素的 第一个子元素（跳过文本、注释）。
不支持 IE8 以下。

📌 语法：

元素.firstElementChild;

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>
    var list = document.getElementById("list");
    console.log(list.firstElementChild); // <li>Item 1</li>
</script>

在这里插入图片描述

🔹 兼容性

IE8 及以下不支持，如需兼容：

var first = list.firstElementChild || list.children[0]; // 兼容写法

6️⃣ `lastChild`

作用：

属性，返回当前节点的最后一个子节点（可能是文本、注释或标签）。
如果最后一个子节点是空白文本，则获取到的是文本。

📌 语法：

元素.lastChild;

✅ 示例

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>
    var list = document.getElementById("list");
    console.log(list.lastChild); // 可能是文本（换行）
</script>

🔥 总结

方法/属性	作用	是否包含文本节点	兼容性	推荐使用
`getElementsByTagName(tag)`	按标签获取子节点	❌ 只获取标签	✅	✅
`childNodes`	获取所有子节点	✅ 包括文本	✅	❌
`children`	获取所有子元素	❌ 只获取元素	✅	✅
`firstChild`	获取第一个子节点	✅ 可能是文本	✅	❌
`firstElementChild`	获取第一个子元素	❌ 只获取元素	❌（不支持 IE8）	✅
`lastChild`	获取最后一个子节点	✅ 可能是文本	✅	❌

🔥获取父节点和兄弟节点

在 DOM 操作 中，我们经常需要获取某个元素的 父节点、兄弟节点或文本内容，以下是常用的方法及属性解析 🚀：

1️⃣ 获取父节点

📌 `parentNode`

作用：

获取当前节点的父节点。
可能获取到 元素节点（标签）或其他类型的节点（如 document）。

📌 语法：

元素.parentNode;

✅ 示例

<div id="child">Hello</div>

<script>
    var child = document.getElementById("child");
    console.log(child.parentNode); // 获取到 <body> 或 <div> 等父元素
</script>

🔹 重点

parentNode 可能返回 document，即根节点。

2️⃣ 获取兄弟节点

📌 `previousSibling`

作用：

获取前一个兄弟节点，可能是文本、注释或标签。
可能会获取到 空白文本（换行符等），导致结果不可预测。

📌 语法：

元素.previousSibling;

✅ 示例

<p>第一段</p>
<!-- 这里有一个换行符（文本节点） -->
<p id="para2">第二段</p>

<script>
    var para2 = document.getElementById("para2");
    console.log(para2.previousSibling); // 可能是换行文本节点
</script>

🔹 兼容性

可能获取到 空白文本节点，导致 null 或意外结果。

📌 `nextSibling`

作用：

获取后一个兄弟节点，可能是文本、注释或标签。
可能会获取到 空白文本（换行符等），导致结果不可预测。

📌 语法：

元素.nextSibling;

✅ 示例

<p id="para1">第一段</p>
<!-- 这里有一个换行符（文本节点） -->
<p>第二段</p>

<script>
    var para1 = document.getElementById("para1");
    console.log(para1.nextSibling); // 可能是换行文本节点
</script>

🔹 问题

可能获取到 空白文本节点，导致 null 或意外结果。

3️⃣ 获取前后兄弟元素（推荐 ✅）

📌 `previousElementSibling`（推荐 ✅）

作用：

获取前一个兄弟元素节点（忽略文本、注释）。
IE8 及以下不支持。

📌 语法：

元素.previousElementSibling;

✅ 示例

<p>第一段</p>
<p id="para2">第二段</p>

<script>
    var para2 = document.getElementById("para2");
    console.log(para2.previousElementSibling); // <p>第一段</p>
</script>

🔹 推荐使用

不会获取空白文本，直接获取前一个元素节点。

📌 `nextElementSibling`（推荐 ✅）

作用：

获取后一个兄弟元素节点（忽略文本、注释）。
IE8 及以下不支持。

📌 语法：

元素.nextElementSibling;

✅ 示例

<p id="para1">第一段</p>
<p>第二段</p>

<script>
    var para1 = document.getElementById("para1");
    console.log(para1.nextElementSibling); // <p>第二段</p>
</script>

🔹 推荐使用

不会获取空白文本，避免 null 或意外结果。

如果要兼容 IE8，可以使用：

var next = para1.nextElementSibling || para1.nextSibling;

4️⃣ 获取元素文本

📌 `innerText`

作用：

获取纯文本内容，自动去除 HTML 标签。
与 innerHTML 类似，但不会包含 HTML 标签。

📌 语法：

元素.innerText;

✅ 示例

<div id="content">
    <p>你好 <strong>世界</strong></p>
</div>

<script>
    var content = document.getElementById("content");
    console.log(content.innerText); // "你好 世界"
</script>

🔹 重点

innerText 不会保留 HTML 标签，而 innerHTML 会保留：

console.log(content.innerHTML); 
// 输出："<p>你好 <strong>世界</strong></p>"

适用于获取纯文本，不适用于操作 HTML 结构。

🔥 总结

方法/属性	作用	是否包含文本节点	兼容性	推荐使用
`parentNode`	获取父节点	✅ 可能是 `document`	✅	✅
`previousSibling`	获取前一个兄弟节点	✅ 可能是文本	✅	❌
`nextSibling`	获取后一个兄弟节点	✅ 可能是文本	✅	❌
`previousElementSibling`	获取前一个兄弟元素	❌ 仅元素	❌（IE8 不支持）	✅
`nextElementSibling`	获取后一个兄弟元素	❌ 仅元素	❌（IE8 不支持）	✅
`innerText`	获取元素文本	❌ 仅文本	✅	✅

🔥练习：全选/全不选/反选⭐️

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">
	window.onload = function(){
		//获取四个多选框items
		var items = document.getElementsByName("items");
		//获取全选/全不选的多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
<------------------------!------------------------------------------------------------------>
		//全选按钮:点击按钮以后，四个多选框全都被选中
		//1. #checkedAllBtn
		//为id为checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			
			//将全选/全不选设置为选中
			checkedAllBox.checked = true;
		};
<------------------------!------------------------------------------------------------------>
		//全不选按钮:点击按钮以后，四个多选框都变成没选中的状态
		//2. #checkedNoBtn
		//为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			for(var i=0; i<items.length ; i++){
				//将四个多选框设置为没选中的状态
				items[i].checked = false;
			}
			//将全选/全不选设置为不选中
			checkedAllBox.checked = false;
			
		};
<------------------------!------------------------------------------------------------------>
		//反选按钮:点击按钮以后，选中的变成没选中，没选中的变成选中
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			//将checkedAllBox设置为选中状态
			checkedAllBox.checked = true;
			for(var i=0; i<items.length ; i++){
				items[i].checked = !items[i].checked;
				//判断四个多选框是否全选
				//只要有一个没选中则就不是全选
				if(!items[i].checked){
					//一旦进入判断，则证明不是全选状态
					//将checkedAllBox设置为没选中状态
					checkedAllBox.checked = false;
				}
			}
			//在反选时也需要判断四个多选框是否全都选中
		};
<------------------------!------------------------------------------------------------------>
		//提交按钮：点击按钮以后，将所有选中的多选框的value属性值弹出
		//4.#sendBtn
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};
<------------------------!------------------------------------------------------------------>
		//5.#checkedAllBox
		//全选/全不选 多选框
		//当它选中时，其余的也选中，当它取消时其余的也取消
		//在事件的响应函数中，响应函数是给谁绑定的this就是谁
		//为checkedAllBox绑定单击响应函数
		checkedAllBox.onclick = function(){
			//设置多选框的选中状态
			for(var i=0; i <items.length ; i++){
				items[i].checked = this.checked;
			}
			
		};
<------------------------!------------------------------------------------------------------>
		//6.items
		//如果四个多选框全都选中，则checkedAllBox也应该选中
		//如果四个多选框没都选中，则checkedAllBox也不应该选中
		//为四个多选框分别绑定点击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;
				for(var j=0 ; j<items.length ; j++){
					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if(!items[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
						//一旦进入判断，则已经得出结果，不用再继续执行循环
						break;
					}
				}
			};
		}
	};
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

在这里插入图片描述

🔥查询剩余属性、方法

在 JavaScript DOM 操作 中，我们可以使用多种方法来查询 页面元素，以下是常用的属性和方法解析 🚀：

1️⃣ 查询 `document` 相关属性

📌 `body`

作用：

document.body 返回 <body> 标签对象，可以直接操作 body 内部的元素。

📌 语法：

document.body;

✅ 示例

console.log(document.body); // 输出 <body>...</body>

🔹 重点

body 只能在 document 对象上使用。

可用于动态修改 body 内部结构：

document.body.innerHTML = "<h1>Hello World!</h1>";

📌 `documentElement`

作用：

document.documentElement 返回 <html> 根标签。
与 document.body 类似，但获取的是整个 HTML 页面。

📌 语法：

document.documentElement;

✅ 示例

console.log(document.documentElement); // 输出 <html>...</html>

🔹 重点

document.documentElement 是整个 HTML 页面，document.body 只是 <body> 部分。
获取页面滚动高度时，通常使用 document.documentElement.scrollTop：
```
console.log(document.documentElement.scrollTop); // 获取滚动条位置
```

📌 `all` ❌

作用：

document.all 返回页面所有元素，类似 getElementsByTagName("*")。
已被废弃，不推荐使用 ❌。

📌 语法：

document.all;

✅ 示例

console.log(document.all); // HTMLCollection(页面所有元素)

🔹 重点

已废弃，尽量使用 document.querySelectorAll("*") 代替。

2️⃣ 查询元素的方法

📌 `getElementsByClassName()`

作用：

根据 class 属性获取一组元素节点对象。
IE8 及以下不支持 ❌。

📌 语法：

document.getElementsByClassName("className");

✅ 示例

<div class="box">1</div>
<div class="box">2</div>

<script>
    var elements = document.getElementsByClassName("box");
    console.log(elements); // HTMLCollection(2) [div.box, div.box]
</script>

🔹 重点

返回 HTMLCollection（类数组），不能直接使用 forEach()，需要转换：
```
Array.from(elements).forEach(el => console.log(el.innerText));
```

📌 `querySelector()`

作用：

支持 CSS 选择器，返回第一个匹配的元素。
可代替 getElementsByClassName()（兼容 IE8）。
适用于 id、class、标签 等查询。

📌 语法：

document.querySelector("CSS选择器");

✅ 示例

<div class="box">1</div>
<div class="box">2</div>

<script>
    var element = document.querySelector(".box");
    console.log(element.innerText); // 输出 1
</script>

🔹 重点

返回单个元素，即使匹配多个。

支持更复杂的选择器：

document.querySelector("div.box:first-child");

📌 `querySelectorAll()`

作用：

支持 CSS 选择器，返回所有匹配的元素（NodeList）。
适用于 id、class、标签 等查询。

📌 语法：

document.querySelectorAll("CSS选择器");

✅ 示例

<div class="box">1</div>
<div class="box">2</div>

<script>
    var elements = document.querySelectorAll(".box");
    console.log(elements); // NodeList(2) [div.box, div.box]
</script>

🔹 重点

返回的是 NodeList（伪数组），可以直接使用 forEach()：
```
elements.forEach(el => console.log(el.innerText));
```
如果只想获取一个元素，推荐 querySelector()，如果需要多个，推荐 querySelectorAll()。

🔥 总结

方法/属性	作用	返回类型	兼容性	推荐使用
`document.body`	获取 `<body>`	`HTMLBodyElement`	✅	✅
`document.documentElement`	获取 `<html>`	`HTMLHtmlElement`	✅	✅
`document.all`	获取所有元素	`HTMLCollection`（已废弃）	❌	❌
`getElementsByClassName()`	获取所有匹配 `class` 的元素	`HTMLCollection`	❌（IE8 不支持）	⚠️
`querySelector()`	获取第一个匹配的元素	`Element`	✅	✅
`querySelectorAll()`	获取所有匹配的元素	`NodeList`	✅	✅

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//在document中有一个属性body，它保存的是body的引用
				var body = document.body;
				//document.documentElement保存的是html根标签
				var html = document.documentElement;
				console.log(html);
				//document.all代表页面中所有的元素
				var all = document.all;
				console.log(all.length);
				for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}
				
				all = document.getElementsByTagName("*");
				console.log(all.length);
				
				//根据元素的class属性值查询一组元素节点对象
				var box1 = document.getElementsByClassName("box1");
				console.log(box1.length);
				
				//获取页面中的所有的div
				var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//var divs = document.getElementsByTagName(".box div");
				
				//虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				//使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				var div = document.querySelector(".box1 div");
				var box1 = document.querySelector(".box1")
				
				console.log(div.innerHTML);
				console.log(box1.innerHTML);
				
				//document.querySelectorAll()
				//该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				//即使符合条件的元素只有一个，它也会返回数组
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
			};
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div></div>
	</body>
</html>

❤️DOM增删改

🔥相关语法

这些方法主要用于 动态操作 DOM，可以创建、插入、替换和删除 HTML 元素。以下是详细解析和示例代码：

1️⃣ 创建新节点

📌 `document.createElement(tagName)` —— 创建一个元素节点

🔹 作用：创建一个新的 HTML 元素（但不会自动添加到页面）。

var newDiv = document.createElement("div"); 
console.log(newDiv); // <div></div>（未添加到页面）

📌 `document.createTextNode(text)` —— 创建文本节点

🔹 作用：创建一个包含文本的 TEXT_NODE 节点（但不会自动添加到页面）。

var textNode = document.createTextNode("Hello, World!");
console.log(textNode); // #text "Hello, World!"

2️⃣ 添加、插入、替换、删除节点

`appendChild()` —— 添加子节点

🔹 作用：将子节点 添加到父节点的最后 。

var parent = document.getElementById("container"); // 假设HTML中有 <div id="container"></div>
var newPara = document.createElement("p"); 
newPara.textContent = "This is a new paragraph!";
parent.appendChild(newPara);

📌 结果

<div id="container">
    <p>This is a new paragraph!</p>
</div>

📌 `insertBefore()`—— 在指定子节点前插入新节点

🔹 作用：在某个 已有的子节点 之前插入新节点。

var parent = document.getElementById("container"); 
var newPara = document.createElement("p"); 
newPara.textContent = "Inserted paragraph!";
var firstChild = parent.firstChild; // 获取第一个子节点
parent.insertBefore(newPara, firstChild);

📌 结果

<div id="container">
    <p>Inserted paragraph!</p>
    <p>（原来的内容）</p>
</div>

📌 `replaceChild()` —— 替换子节点

🔹 作用：用 新节点 替换 旧节点。

var parent = document.getElementById("container");
var newPara = document.createElement("p");
newPara.textContent = "Replaced paragraph!";
var oldPara = parent.children[0]; // 获取第一个 <p> 元素
parent.replaceChild(newPara, oldPara);

📌 结果

<div id="container">
    <p>Replaced paragraph!</p> <!-- 原来的p被替换 -->
</div>

📌 `removeChild()`—— 删除子节点

🔹 作用：删除 指定的子节点。

var parent = document.getElementById("container");
var paraToRemove = parent.children[0]; // 获取第一个 <p> 元素
parent.removeChild(paraToRemove);

📌 结果

<div id="container">
    <!-- 里面的 <p> 被删除 -->
</div>

📌 另一种写法

var para = document.querySelector("p");
para.parentNode.removeChild(para);

方法	作用	语法
`createElement()`	创建元素节点	`document.createElement("tag")`
`createTextNode()`	创建文本节点	`document.createTextNode("text")`
`appendChild()`	追加子节点到最后	`parent.appendChild(child)`
`insertBefore()`	在某个子节点前插入	`parent.insertBefore(newNode, oldNode)`
`replaceChild()`	替换旧的子节点	`parent.replaceChild(newNode, oldNode)`
`removeChild()`	删除子节点	`parent.removeChild(child)`

💡 实战：动态创建并删除一个按钮

var btn = document.createElement("button");
btn.textContent = "Click Me";
document.body.appendChild(btn);

// 点击按钮后删除自己
btn.onclick = function() {
    btn.parentNode.removeChild(btn);
};

💡 实战

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			window.onload = function() {
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					var li = document.createElement("li");
					
					//创建广州文本节点
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					//插入新的子节点
					city.insertBefore(li , bj);
				});
				
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					//替换已有的子节点
					city.replaceChild(li , bj);
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					city.removeChild(bj);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
				});
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

在这里插入图片描述

🔥练习：添加删除记录⭐️

confirm()：用于弹出一个带有确认和取消按钮的提示框。
- 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
- 如果用户点击确认则会返回true，如果点击取消则返回false
点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为。

在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
<------------------!------------------------------------------------------------------->
			//删除tr的响应函数
			function delA() {
				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				var name = tr.children[0].innerHTML;
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				return false;
			};
<------------------!------------------------------------------------------------------->
			window.onload = function() {
				//点击超链接以后，删除一个员工的信息
				//获取所有超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}
<------------------!------------------------------------------------------------------->
				//添加员工的功能
				//点击按钮以后，将员工的信息添加到表格中
				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					//创建一个tr
					var tr = document.createElement("tr");

					//设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数				
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);
				};

			};
		</script>
	</head>

	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

❤️操作CSS样式

🔥操作内联样式

通过JS修改元素的样式，语法：元素.style.样式名 = 样式值
注意：
- 如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color。
- 需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。
- 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
- 但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。
读取样式，语法：元素.style.样式名，通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

🔥获取元素当前显示样式

获取元素的当前显示的样式，语法：元素.currentStyle.样式名
- 它可以用来读取当前元素正在显示的样式。
- 如果当前元素没有设置该样式，则获取它的默认值。
- currentStyle只有IE浏览器支持，其他的浏览器都不支持。
在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用，需要两个参数：
- 第一个：要获取样式的元素。
- 第二个：可以传递一个伪元素，一般都传null。
- 该方法会返回一个对象，对象中封装了当前元素对应的样式。
- 可以通过对象.样式名来读取样式。
- 如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度，但是该方法不支持IE8及以下的浏览器。
- 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//读取box1的宽度

					// alert(box1.style.width);
					// box1.currentStyle.width = "200px";
					// alert(box1.currentStyle.backgroundColor);
					
					// var obj = getComputedStyle(box1,null);
					// alert(getComputedStyle(box1,null).width);
					// alert(getComputedStyle(box1,null).backgroundColor);
					
					var w = getStyle(box1,"width");
					alert(w);
				};
				
			};
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

🔥其他样式操作的属性

这些属性主要用于获取元素的尺寸、偏移量和滚动信息，在网页布局、滚动监听、固定定位计算等场景非常有用。下面详细解析并提供示例代码。

1️⃣ client、offset、scroll 的区别

属性	包含内容	是否包含滚动条	是否可修改
`clientWidth` / `clientHeight`	内容区 + 内边距	❌ 不包含	❌ 只读
`offsetWidth` / `offsetHeight`	内容区 + 内边距 + 边框	✅ 包含	❌ 只读
`scrollWidth` / `scrollHeight`	整个滚动区域（超出部分也计算）	❌ 不包含	❌ 只读
`scrollLeft` / `scrollTop`	滚动条偏移量	✅ 包含	✅ 可修改
`offsetLeft` / `offsetTop`	相对于 offsetParent 的偏移量	❌ 不包含	❌ 只读

2️⃣ 获取元素可见尺寸

📌 `clientWidth` 和 `clientHeight` —— 可见区域尺寸

🔹 作用：获取元素的可见宽度和高度（不包括滚动条、边框）。

var box = document.getElementById("box");
console.log(box.clientWidth);  // 获取可见宽度
console.log(box.clientHeight); // 获取可见高度

📌 示例

<div id="box" style="width: 200px; height: 150px; padding: 10px; border: 5px solid black; overflow: scroll;">
    内容内容内容
</div>

📌 计算公式

clientWidth = 内容宽度 + 左右 padding
clientHeight = 内容高度 + 上下 padding

📌 示例结果

box.clientWidth  // 200 (内容 180 + 左右 padding 各10)
box.clientHeight // 150 (内容 130 + 上下 padding 各10)

📌`offsetWidth` 和 `offsetHeight` —— 包括边框

🔹 作用：获取元素的整个宽度/高度，包括内容区、内边距和边框（但不包括外边距）。

console.log(box.offsetWidth);  // 210px（200 + 5px 边框 *2）
console.log(box.offsetHeight); // 160px（150 + 5px 边框 *2）

📌 计算公式

offsetWidth = 内容宽度 + 左右 padding + 左右 border
offsetHeight = 内容高度 + 上下 padding + 上下 border

3️⃣ 获取元素偏移量

📌`offsetParent` —— 获取定位父元素

🔹 作用：获取最近的开启定位（position: relative/absolute/fixed）的祖先元素。

console.log(box.offsetParent); // 返回 box 的最近定位父元素

📌 规则

如果 box 的祖先元素有 position: relative / absolute / fixed，返回最近的定位祖先。
如果 box 没有定位祖先，返回 body。

📌`offsetLeft` 和 `offsetTop` —— 元素相对定位父元素的偏移量

🔹 作用：获取元素相对于 offsetParent 的水平/垂直偏移量（单位 px）。

console.log(box.offsetLeft); // 左侧偏移量
console.log(box.offsetTop);  // 顶部偏移量

📌 示例

<div style="position: relative;">
    <div id="box" style="position: absolute; left: 50px; top: 30px;"></div>
</div>

📌 结果

box.offsetLeft  // 50px
box.offsetTop   // 30px

4️⃣ 获取滚动信息

📌`scrollWidth` 和 `scrollHeight` —— 整个滚动区域

🔹 作用：获取整个内容的宽度/高度，即使内容超出可视区域。

console.log(box.scrollWidth);  // 滚动区域总宽度
console.log(box.scrollHeight); // 滚动区域总高度

📌 示例

<div id="box" style="width: 200px; height: 150px; overflow: auto;">
    <p style="width: 400px; height: 300px;">超出内容</p>
</div>

📌 结果

box.scrollWidth  // 400px
box.scrollHeight // 300px

📌`scrollLeft` 和 `scrollTop` —— 获取滚动距离

🔹 作用：获取滚动条滚动的距离。

console.log(box.scrollLeft); // 水平方向滚动距离
console.log(box.scrollTop);  // 垂直方向滚动距离

📌 示例

<div id="box" style="width: 200px; height: 150px; overflow: auto;">
    <p style="width: 400px; height: 300px;">超出内容</p>
</div>

📌 当滚动到底部

if (box.scrollHeight - box.scrollTop === box.clientHeight) {
    console.log("滚动到底部！");
}

📌 当滚动到最右侧

if (box.scrollWidth - box.scrollLeft === box.clientWidth) {
    console.log("滚动到最右侧！");
}

5️⃣ 实战案例

🔹 监听滚动事件
📌 需求：监听 div 的滚动，判断是否到底。

box.addEventListener("scroll", function() {
    if (box.scrollHeight - box.scrollTop === box.clientHeight) {
        console.log("滚动到底部！");
    }
});

6️⃣ 总结

属性	作用
`clientWidth` / `clientHeight`	可见区域尺寸（不含边框和滚动条）
`offsetWidth` / `offsetHeight`	元素整体大小（包含边框）
`offsetParent`	最近的定位父元素
`offsetLeft` / `offsetTop`	相对 offsetParent 的偏移量
`scrollWidth` / `scrollHeight`	整个滚动区域尺寸
`scrollLeft` / `scrollTop`	滚动条偏移量

这些属性在网页动态布局、滚动监听、吸顶导航、无限加载等场景中都非常实用！🎯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
			#box2{
				padding: 100px;
				background-color: #bfa;
			}
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				btn01.onclick = function(){
					alert('盒子1的可见宽度：'+box1.clientWidth);
					alert('盒子1的可见高度：'+box1.clientHeight);
					alert('盒子1的整体宽度：'+box1.offsetWidth);
					
					var op = box1.offsetParent;
					alert('盒子1的定位父元素：'+op.id);
					
					alert('盒子1相对于父元素的水平偏移量：'+box1.offsetLeft);
					
					alert('盒子4的可见高度：'+box4.clientHeight);
					alert('盒子4的滚动区域宽度：'+box4.scrollWidth);
					
					alert('盒子4的水平滚动条的距离：'+box4.scrollLeft);
					alert('盒子4的垂直滚动条的距离：'+box4.scrollTop);
				};
			};
		</script>
	</head>
	<body id="body">
		<button id="btn01">点我一下</button>
		<br /><br />
		
		 <div id="box4">
		 	<div id="box5"></div>
		 </div>
		
		<br /><br />
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>
	</body>
</html>

🔥练习：垂直滚动条滚动到底时使表单项可用⭐️

onscroll：该事件会在元素的滚动条滚动时触发。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #license {
            width: 300px;
            height: 350px;
            border: 2px solid black;
            margin: 50px auto 0px;
            overflow: auto;
			background-color: beige;
            text-indent: 2em;
        }

        #license>p {
            margin: 0;
        }

        #license>p:nth-of-type(1) {
            text-align: center;
        }

        #bottom {
            width: 200px;
            height: 50px;
            margin: 10px auto 0;
        }
    </style>
</head>
<body>
<div></div>

<div id="license">
    <p style="font-size: 20px;"><strong>用户服务协议</strong><p>
    <p><span style="color: red;"><strong>亲爱的用户，请仔细阅读以下协议!!</strong></span><br>
		1、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播下列信息：<br>
		（1）煽动抗拒、破坏宪法和法律、行政法规实施的；<br>
		（2）煽动颠覆国家政权，推翻社会主义制度的；<br>
		（3）煽动分裂国家、破坏国家统一的；<br>
		（4）煽动民族仇恨、民族歧视，破坏民族团结的；<br>
		（5）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；<br>
		（6）宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖、教唆犯罪的；<br>
		（7）公然侮辱他人或者捏造事实诽谤他人的，或者进行其他恶意攻击的；<br>
		（8）损害国家机关信誉的；<br>
		（9）其他违反宪法和法律行政法规的；<br>
		（10）进行商业广告行为的。<br>
		2、未经本站的授权或许可，任何会员不得借用本站的名义从事任何商业活动，也不得将本站作为从事商业活动的场所、平台或其他任何形式的媒介。
		禁止将本站用作从事各种非法活动的场所、平台或者其他任何形式的媒介。
    </p>
	<p style="color: red;">违反者若触犯法律，一切后果自负，本站不承担任何责任。</p>
</div>
<div id="bottom">
    我已阅读协议
    <input type="checkbox" name="注册" id="bottomOpt" value="注册" disabled="" />
    <button type="button" id="button" disabled="">同意</button>
</div>

<script type="text/javascript">
    let license = document.getElementById("license");
    let bottomOpt = document.getElementById("bottomOpt");
    let button = document.getElementById("button");

    license.onscroll = function() {
        // 滑到底才触发
        // 内容的总高度(scrollHeight)-滑动后的窗口距离最顶部方的距离(scrollTop)==窗口的大小时(height+内边距)
        // 这个过程中：scrollTop在不断增大(0-某一个范围)
        // 这里写本应该是等于，但考虑到误差问题，写成<=
        if (license.scrollHeight - license.scrollTop <= license.clientHeight) {
            bottomOpt.disabled = false;
            bottomOpt.onclick = function() {
                if (bottomOpt.checked) {
                    button.disabled = false;
                    button.onclick = function() {
                        alert("注册成功！");
                    }
                }
            }
        }
    }
</script>
</body>
</html>

以mysql 为例，在cmd 命令行连接数据，操作数据库，关闭数据库的详细步骤

java string 类型转list实体类且忽略实体类中没有的字段

城市更新浪潮下的破局之道：中建海龙模块化集成建筑技术的新应用

数智读书笔记系列021《大数据医疗》：探索医疗行业的智能变革

接收与发送ipv6数据包

北斗设备启动流程与时长解析

W80x使用WM IoT SDK 2.X 开发（二）驱动tft屏幕

JavaScript |（六）DOM事件 | 尚硅谷JavaScript基础实战

JVM 学习前置知识

2025年渗透测试面试题总结-某四字大厂实习面试复盘一面二面三面（题目+回答）

【赵渝强老师】达梦数据库MPP集群的架构

Rust练手项目第一章

STM32 SPI总线驱动CH376T实现U盘/TF卡读写全解析—CH376数据手册分析（中上） | 零基础入门STM32第七十三步

XXE漏洞

Ollama详解，无网环境导入运行本地下载的大模型，无网环境pycharm插件大模型调用（更新中）

招聘面试季--一文顿悟，Java中字节流和字符流的区别及使用场景上的差异

Linux安装go环境

Linux练习

训练过程中实时显示 epoch 进度和动态指标

Babel 从入门到精通（二）：Plugin插件和Preset预设配置详解

武康大楼再开发：一栋楼火还不够，要带火街区“朋友圈”

对谈｜“大礼议”：嘉靖皇帝的礼法困境与权力博弈

马上评｜文玩字画竞拍轻松赚差价？严防这类新型传销

机构发布“2025中国高职院校排名”

晋级四强！WTA1000罗马站：郑钦文2比0萨巴伦卡

商务部新闻发言人就出口管制管控名单答记者问

JavaScript |（五）DOM简介 | 尚硅谷JavaScript基础&实战

❤️DOM简介

🔥事件

🔥文档的加载

❤️DOM查询

🔥节点

🔥节点的属性

1️⃣ getElementById(id)

2️⃣ getElementsByTagName(tagName)

3️⃣ getElementsByName(name)

4️⃣ innerHTML

5️⃣ 直接获取元素属性

6️⃣ className 获取 class 属性

🔥练习：图片切换⭐️

🔥元素节点的子节点

1️⃣ getElementsByTagName(tagName)

2️⃣ childNodes

3️⃣ children（推荐使用 ✅）

4️⃣ firstChild

5️⃣ firstElementChild（更精准 ✅）

6️⃣ lastChild

🔥获取父节点和兄弟节点

1️⃣ 获取父节点

📌 parentNode

2️⃣ 获取兄弟节点

📌 previousSibling

📌 nextSibling

3️⃣ 获取前后兄弟元素（推荐 ✅）

📌 previousElementSibling（推荐 ✅）

📌 nextElementSibling（推荐 ✅）

4️⃣ 获取元素文本

📌 innerText

🔥练习：全选/全不选/反选⭐️

🔥查询剩余属性、方法

1️⃣ 查询 document 相关属性

📌 body

📌 documentElement

📌 all ❌

2️⃣ 查询元素的方法

📌 getElementsByClassName()

📌 querySelector()

📌 querySelectorAll()

❤️DOM增删改

🔥相关语法

1️⃣ 创建新节点

📌 document.createElement(tagName) —— 创建一个 元素节点

📌 document.createTextNode(text) —— 创建 文本节点

2️⃣ 添加、插入、替换、删除节点

appendChild() —— 添加子节点

📌 insertBefore()—— 在指定子节点前插入新节点

📌 replaceChild() —— 替换子节点

📌 removeChild()—— 删除子节点

💡 实战

🔥练习：添加删除记录⭐️

❤️操作CSS样式

🔥操作内联样式

🔥获取元素当前显示样式

🔥其他样式操作的属性

1️⃣ client、offset、scroll 的区别

2️⃣ 获取元素可见尺寸

📌 clientWidth 和 clientHeight —— 可见区域尺寸

📌offsetWidth 和 offsetHeight —— 包括边框

3️⃣ 获取元素偏移量

📌offsetParent —— 获取定位父元素

📌offsetLeft 和 offsetTop —— 元素相对定位父元素的偏移量

4️⃣ 获取滚动信息

📌scrollWidth 和 scrollHeight —— 整个滚动区域

📌scrollLeft 和 scrollTop —— 获取滚动距离

5️⃣ 实战案例

6️⃣ 总结

🔥练习：垂直滚动条滚动到底时使表单项可用⭐️

相关文章：

1️⃣ `getElementById(id)`

2️⃣ `getElementsByTagName(tagName)`

3️⃣ `getElementsByName(name)`

4️⃣ `innerHTML`

6️⃣ `className` 获取 `class` 属性

1️⃣ `getElementsByTagName(tagName)`

2️⃣ `childNodes`

3️⃣ `children`（推荐使用 ✅）

4️⃣ `firstChild`

5️⃣ `firstElementChild`（更精准 ✅）

6️⃣ `lastChild`

📌 `parentNode`

📌 `previousSibling`

📌 `nextSibling`

📌 `previousElementSibling`（推荐 ✅）

📌 `nextElementSibling`（推荐 ✅）

📌 `innerText`

1️⃣ 查询 `document` 相关属性

📌 `body`

📌 `documentElement`

📌 `all` ❌

📌 `getElementsByClassName()`

📌 `querySelector()`

📌 `querySelectorAll()`

📌 `document.createElement(tagName)` —— 创建一个元素节点

📌 `document.createTextNode(text)` —— 创建文本节点

`appendChild()` —— 添加子节点

📌 `insertBefore()`—— 在指定子节点前插入新节点

📌 `replaceChild()` —— 替换子节点

📌 `removeChild()`—— 删除子节点

📌 `clientWidth` 和 `clientHeight` —— 可见区域尺寸

📌`offsetWidth` 和 `offsetHeight` —— 包括边框

📌`offsetParent` —— 获取定位父元素

📌`offsetLeft` 和 `offsetTop` —— 元素相对定位父元素的偏移量

📌`scrollWidth` 和 `scrollHeight` —— 整个滚动区域

📌`scrollLeft` 和 `scrollTop` —— 获取滚动距离