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

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

news 来源：原创 2025/8/6 11:03:21

学习来源：尚硅谷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"; // 修改 classconsole.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); // 输出：myDivconsole.log(divElement.className); // 输出：containerconsole.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");//打印lisalert(lis.length);//变量lisfor(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是否小于0if(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); // 3console.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(){//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");
<------------------------!------------------------------------------------------------------>//全选按钮:点击按钮以后，四个多选框全都被选中//1. #checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历itemsfor(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.#checkedRevBtnvar 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(){//遍历itemsfor(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);//获取页面中的所有的divvar 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");//获取cityvar 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");//获取cityvar city = document.getElementById("city");//替换已有的子节点city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");city.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//创建一个livar 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就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字var name = tr.children[0].innerHTML;var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.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和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//创建一个trvar 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;//获取tablevar employeeTable = document.getElementById("employeeTable");//获取employeeTable中的tbodyvar 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>

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

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

编程日记 2025/8/6 11:03:21

模型整合-cherry studio+mysql_mcp_server服务配置

一、什么是MCP MCP（Model Context Protocol）是模型上下文协议，它允许大型语言模型（LLM）通过协议与外部工具或服务交互，动态获取实时数据或执行操作。简单来说，它让模型不再局限于静态知识库&…...

编程日记 2025/8/6 23:17:02

【QA】装饰模式在Qt中有哪些运用？

在Qt框架中，装饰模式（Decorator Pattern）主要通过继承或组合的方式实现，常见于IO设备扩展和图形渲染增强场景。以下是Qt原生实现的装饰模式典型案例： 一、QIODevice装饰体系（继承方式） 场景 …...

编程日记 2025/8/4 8:05:47

window 设置自动开启/关闭程序（分享）

打开计算机管理 winr 输入 compmgmt.msc 找到任务计划程序创建任务设置开启任务常规：添加名称与描述触发器：新建触发时间与次数操作：新建执行程序添加任务对应的位置以便修改设置关闭任务添加批处理文件，写完后吧 .…...

编程日记 2025/8/6 23:12:26

QT布局笔记

在 Qt 中，如果你希望将一个 QGroupBox 放置在水平布局（QHBoxLayout）的上方，可以通过将它们添加到一个垂直布局（QVBoxLayout）中来实现。垂直布局会将子布局或子控件按垂直顺序排列，因此 QGroupBo…...

编程日记 2025/8/6 23:14:45

大模型对话 from langchain.chat_models import ChatOpenAI # 内置对话模型 from langchain.schema import HumanMessage, SystemMessage, AIMessage # 用户提示词，系统提示词， AI响应chat ChatOpenAI(temperature0.7, openai_api_keyxxxxxxxxxxxx) #…...

编程日记 2025/8/6 23:15:13

SpringBoot实战（三十二）集成 ofdrw，实现 PDF 和 OFD 的转换、SM2 签署OFD

目录一、OFD 简介 1.1 什么是 OFD？1.2 什么是版式文档？1.3 为什么要用 OFD 而不是PDF？ 二、ofdrw 简介 2.1 定义2.2 Maven 依赖2.3 ofdrw 的 13 个模块三、PDF/文本/图片转 OFD（ofdrw-conterver） 3.1 介绍&#xf…...

编程日记 2025/8/5 23:19:21

SolidWorks使用显卡教程

操作步骤： 打开注册表编辑器按下键盘上的 Win R 组合键，输入 regedit 并按回车键，打开注册表编辑器。导航到显卡信息路径在注册表中依次展开以下路径： plaintext HKEY_CURRENT_USER\Software\SolidWorks\SOLIDWORKS 2021\Per…...

编程日记 2025/8/6 6:55:25

mysql 查询进程查看并释放

在MySQL中，查看和管理进程（例如查询、连接等）是数据库维护和性能调优的重要部分。以下是一些常用的方法来查看MySQL进程并释放它们。 1. 查看进程你可以使用SHOW PROCESSLIST命令来查看当前MySQL服务器上的所有进程。这个命令会显示正在执…...

编程日记 2025/8/5 13:26:40

C++代码2-多目标算法求解车辆路径规划

为了解决车辆路径规划问题，我们需要在同一模型中同时考虑多个目标，其中一个目标是降低运营总成本，而另一个目标是降低总的碳排放量。使用组合算法，包括人工蜂群算法（Artificial Bee Colony, ABC）、模拟退火算法（Simulated Annealing, SA）、以及多目标优化算法MODAD（Mu…...

编程日记 2025/8/4 7:20:23

JAVA学习*接口

接口在生活中我们常听说USB接口，那接口是什么呢？ 在Java中，接口相当于多个类的一种公共规范，是一种引用数据类型。定义接口 public interface IUSB {public static final String SIZE "small";public abstract vo…...

编程日记 2025/8/6 8:42:52

Matplotlib

一、Matplotlib快速入门学习目标了解什么是matplotlib 为什么要学习matplotlib matplotlib简单图形的绘制 1、什么是Matplotlib 是专门用于开发2D图表(包括3D图表) 以渐进、交互式方式实现数据可视化 2、为什么要学习Matplotlib 可视化是在整个数据挖掘的关键辅助工…...

编程日记 2025/8/6 23:17:27

新版frp-0.61.0 实现泛解析域名穿透以及 https启用

需要在公网服务器的域名解析平台泛域名 *.aa.com 解析到frp 公网服务器的ip x.x.x.x 对于frpc.toml 文件的 serverAddr 绑定的ip 需要公网服务器放行 bindPort 对于的端口 frpc.toml serverPort 对于的的是 frps.toml bindPort 端口 frps.toml bindPort 7000 vhostHTTPP…...

编程日记 2025/8/4 17:07:31

HTTPS 加密过程详解

HTTPS 详解及其加密过程流程框架 HTTPS（Hypertext Transfer Protocol Secure）是一种基于 HTTP 协议的安全通信协议，通过 SSL/TLS 协议对传输数据进行加密和身份验证，解决了 HTTP 明文传输的安全隐患。以下是其核心原理和加密流程的…...

编程日记 2025/8/6 10:26:04

lua垃圾回收

lua垃圾回收 lua 垃圾回收 lua 垃圾回收 collectgarbage(“count”)获取当前lua脚本占用内存字节数(单位为KB)。 collectgarbage(“collect”)执行一次垃圾回收。 xxxnil 将变量置为空，会释放内存。 lua中的机制和c#中回收机制很类似解除羁绊(置为空)。 --垃圾回…...

编程日记 2025/8/4 22:40:10

springboot继承使用mybatis-plus举例相关配置，包括分页插件以及封装分页类

以下是使用 MyBatis-Plus 分页插件的完整配置和封装步骤，包括日志输出、驼峰转下划线、逻辑删除以及分页属性类的封装。 1. 引入依赖确保在 pom.xml 中已经引入 MyBatis-Plus 的依赖： <XML> <dependency><groupId>com.baomidou<…...

编程日记 2025/8/4 16:17:38

智能汽车以太网系统测试：聚焦ETH链路高负载性能表现

引言在智能汽车高速发展的今天，车载以太网作为车辆信息交互的“神经网络”，承担着传输海量数据的关键使命。它不仅能够满足车辆对高带宽、低延迟和高可靠性的通信需求，还为自动驾驶、智能座舱等复杂功能提供了强大的技术支持。然而&#xf…...

编程日记 2025/8/4 1:36:48

学习笔记：黑马程序员JavaWeb开发教程(2025.3.21)

10.7 案例-员工管理-分页查询-分析形参的默认值可以使用注解来设置：RequestParam(default “1”) 10.8 案例-员工管理-分页查询-PageHelper插件分页插件PageHelper帮助完成有关分页的所有操作，我们只要正常使用查询语句就可以了。插件会自动…...

编程日记 2025/8/4 6:17:06

计算机网络精讲day1——计算机网络的性能指标（上）

性能指标1：速率概念1：比特英文全称是binary digit，意思是一个二进制数字，因此一个比特就是二进制数字中的1或0，比特也是信息论中使用的信息量单位。概念2：速率网络中的速率指的是数据的传送速率&#…...

编程日记 2025/8/4 14:00:51

gin-路由handler封装思路

约束handler入参和返回为func(ctx, req) (resp, error)。通过反射，封装handler，在调用前后写入入参和返回的处理。 package testingimport ("context""fmt""reflect""strings""testing" )type ReqPa…...

编程日记 2025/8/3 5:19:12

【实战案例】用STAR+3W模型拆解电商支付系统设计文档

各位开发者朋友，上次分享了结构化写作的黄金公式后，很多同学反馈需要更具象的落地方法。今天通过真实电商支付系统案例，手把手教你用STAR3W模型写出可执行的设计文档！ 结构化写作的「黄金公式」 STAR原则 3W模型 Situation&…...

编程日记 2025/8/1 12:56:15

计算机组成原理和计算机网络常见单位分类及换算

计算机组成原理（主要用于存储、内存、缓存等） 计算机网络（主要用于传输速率） 直观对比...

编程日记 2025/7/17 21:29:24

线性筛法求素数

时间复杂度 o（n） int cnt, primes[N];//cnt用来记录素数的下标 bool st[N];//用来标记合数 int minp[N];//最小质因数 void get_primes(int n) {for(int i 2;i < n;i )//从2开始找数 {if(!st[i])//如果这个数没有被筛出去过，说明是一…...

编程日记 2025/8/6 0:33:37

触动精灵对某东cookie读取并解密--记lua调用C语言

在Mac上构建Lua扩展模块：AES解密与Base64解码实战今天我要分享一个实用技术：如何在Mac系统上为Lua编写和编译C扩展模块，特别是实现一个某东iOS PIN码解密功能的扩展。这对于需要在Lua环境中执行高性能计算或使用底层系统功能的开发者非常有…...

编程日记 2025/8/6 20:46:48

GEO：在AI时代抢占DeepSeekC位？

前言：当SEO遇见AGI——一场静默的流量革命在生成式AI日均处理53亿次查询的今天，传统SEO的「关键词-排名-点击」逻辑正在崩塌。DeepSeek、ChatGPT、豆包等大模型用动态生成的答案，悄然截流了68%的搜索需求。更残酷的是：当用户问&q…...

编程日记 2025/8/6 1:33:23

【设计模式】策略模式

以下是格式优化后的Markdown文档，仅调整代码缩进，保持内容不变： 四、策略模式策略(Strategy) 模式是一种行为型模式，其实现过程与模板方法模式非常类似——都是以扩展的方式支持未来的变化。本章通过对一个具体范例的逐步重构…...

编程日记 2025/8/6 16:19:31

第J6周：ResNeXt-50实战解析

文章目录一、前期准备1.设置GPU2.导入数据3.查看数据二、数据预处理1.加载数据2.可视化数据3.再次检查数据4.配置数据集四、模型复现1. 分组卷积模块2. 定义残差模块3. 堆叠残差单元4. 搭建ResNext-50网络5. 查看模型摘要五、训练模型六、结果可视化总结： &…...

编程日记 2025/7/31 16:45:39

调试 ResNet18 cpp实现中的段错误（SIGSEGV）问题

调试 ResNet18 cpp实现中的段错误（SIGSEGV）问题问题分析您的程序在运行时遇到了段错误（SIGSEGV），GDB显示错误发生在main()函数的第一行（resnet18_allo_test.cpp:33）。这种情况看起来很奇怪&…...

编程日记 2025/8/3 23:45:23

详细介绍IDI_APPLICATION和IDC_ARROW

书籍：《windows程序设计(第五版)》环境：visual studio 2022 内容：HELLOWIN程序说明：以下内容大部分来自腾讯元宝。 IDI_APPLICATION 与 IDC_ARROW 详解 1. IDC_ARROW（光标资源标识符） 定义与…...

编程日记 2025/8/5 8:02:49

curl库+openssl库windows编译

一、工具准备 Visual Studio 2008：确保安装了 C 开发工具。 Git：用于克隆 cURL 的源码。 Perl：可以从 ActiveState Perl 下载并安装。 NASM（可选）：如果需要汇编优化，可以从NASM 官方网站下载并…...

编程日记 2025/8/5 15:11:03

今日行情明日机会——20250321

后续投资机会分析结合2025年3月21日盘面数据（涨停56家，跌停31家），市场呈现结构性分化行情，海洋经济成为绝对主线，机器人概念局部活跃，人工智能表现较弱。以下是具体方向与策略建议&#xff1a…...

编程日记 2025/8/3 5:17:43

repo init 错误 Permission denied (publickey)

一、已经生成ssh-key并设置到gerrit上二、已经设置.gitconfig （此步骤是公司要求，设置gerrit地址为一个别名之类的，有的公司不需要） 然后出现下面的错误，最后发现忘记设置git的用户名和邮箱 1. git config --globa…...

编程日记 2025/8/6 16:21:44

STM32 模拟SPI 模式0

SPI 模式 0 的时钟极性（CPOL）为 0，时钟相位（CPHA）为 0。CPOL 0 意味着时钟信号空闲时为低电平，CPHA 0 表示在时钟信号的第一个跳变沿（上升沿）进行数据采样。 #include "stm3…...

编程日记 2025/8/3 19:52:48

MySQL实现全量同步和增量同步到SQL Server或其他关系型库

在将MySQL中的两张表同步到SQL Server的过程中，全量同步和增量同步各有其优缺点。全量同步简单直接但可能耗时较长且资源消耗大，而增量同步则更加高效但需要额外的逻辑来处理数据的变更。以下是对这两种同步方式的详细解释及代码示例的完善。完整代码示…...

编程日记 2025/8/3 11:56:31

详细解析GetOpenFileName()

书籍：《Visual C 2017从入门到精通》的2.3.8 Win32控件编程环境：visual studio 2022 内容：【例2.34】打开文件对话框和另存为。说明：以下内容大部分来自腾讯元宝。 GetOpenFileName() 是 Windows API 中用于显示标准文件打开…...

编程日记 2025/8/4 21:21:45

FPGA----完美解决Windows下[XSIM 43-3409][XSIM 43-3915]错误

大家好久不见，今天开始又要重操旧业了！最近会更新很多关于petalinux的踩坑日记，敬请期待！ 先更新一个常见问题，使用Vivado仿真时C编译器报错问题。如下所示 ERROR: [XSIM 43-3409] Failed to compile generated C fi…...

编程日记 2025/8/4 21:22:09

LeetCode Hot100 刷题路线（Python版）

目录 1. LeetCode Hot100 刷题笔记（1）—— 哈希、双指针、滑动窗口 2. LeetCode Hot100 刷题笔记（2）—— 子串、普通数组、矩阵 3. LeetCode Hot100 刷题笔记（3）—— 链表 4. LeetCode Hot100 刷题笔记&…...

编程日记 2025/8/3 18:03:48

宇树科技纯技能要求总结

一、嵌入式开发与硬件设计核心技能嵌入式开发： 精通C/C，熟悉STM32、ARM开发熟悉Linux BSP开发及驱动框架（SPI/UART/USB/FLASH/Camera/GPS/LCD）掌握主流平台（英伟达、全志、瑞芯微等） 硬件设计&#xff1a…...

编程日记 2025/8/3 18:26:53

Docker学习笔记（十）搭建Docker私有仓库

一、环境配置 1、宿主机系统：macOS Sequoia(版本15.2) 2、虚拟机VMware Fusion版本：专业版 13.6.2 (24409261) 3、虚拟机系统：AlmaLinux-9-latest-x86_64-boot.iso 二、安装Harbor开源企业级Docker镜像 Harbor 是一个开源的企业级 Docker…...

编程日记 2025/8/4 17:42:50

FastAPI WebSocket 无法获取真实 IP 错误记录

FastAPI WebSocket 无法获取真实 IP 错误记录问题描述在使用 FastAPI WebSocket 服务时，发现无法获取设备的真实 Remote IP，所有连接均显示为内网地址 10.x.x.1。以下是完整的排查过程及解决方案。排查步骤 1. 基础信息检查 • 现象复现&#xff1…...

编程日记 2025/8/4 4:55:56

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例4，TableView15_04导出当前页数据示例

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例4，TableView15_04导出当…...

编程日记 2025/8/3 1:18:23

【Linux】快速上手Makeflie CMake

🦄个人主页:修修修也 🎏所属专栏:Linux ⚙️操作环境:Xshell (操作系统:Ubuntu 22.04 server 64bit) 目录 📌快速上手Makefile 基本结构变量自动变量常用目标 📌快速上手CMake CMake与Makefile的关系 CMake的使用步骤常用命令…...

编程日记 2025/8/4 18:43:34

Python连接数据库进行增删改查

更多优质文章 _>_>_>_>_>✍✈✉戳我目录 1.导入相关库 2.创建连接 3.插入数据 4.删除数据 5.修改数据 6.查询数据 7.更多干货 1.导入相关库 import pymysql -----pip install pymysql #下载库 2.创建连接 conn pymysql.connect(hostlocalho…...

编程日记 2025/8/3 14:00:35

数据库的两种模式

数据库的严格模式（Strict Mode） 和宽松模式（Non-Strict Mode） 是数据库管理系统（DBMS）中用于控制数据验证和处理方式的两种不同模式。它们的主要区别在于对数据完整性、一致性和错误处理的严格程度。 1. …...

编程日记 2025/8/5 14:45:54

【css酷炫效果】纯CSS实现立体旋转立方体

【css酷炫效果】纯CSS实现立体旋转立方体缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492014 缘创作随缘，不定时更新。创作背景刚看到csdn出活动了&am…...

编程日记 2025/8/3 18:55:03

Cursor与Coze结合开发电影推荐系统：一次高效的技术实践

1 项目背景有个想法，和朋友打算一起看电影，但是不知道看什么（吃饭也是），于是在豆瓣高分电影榜单中选择出来一些感兴趣的电影，随机挑选一部“天意之选”。为此，我尝试结合Cursor（智…...

编程日记 2025/8/2 22:00:38

【总结篇】java多线程,新建线程有几种写法,以及每种写法的优劣势

java多线程新建线程有几种写法,以及每种写法的优劣势 [1/5]java多线程新建线程有几种写法–继承Thread类以及他的优劣势[2/5]java多线程-新建线程有几种写法–实现Runnable接口以及他的优劣势[3/5]java多线程新建线程有几种写法–实现Callable接口结合FutureTask使用以及他的…...

编程日记 2025/7/28 16:35:41

idea问题（三）pom文件显示删除线

一、问题 1、现象 2、原因分析原因和出现的流程：创建子模块的时候因为名称错误了，并且通过修改模块模块名称后，又删除了模块，因删除不干净。再次建立了同名模块，会让IDEA认为你再次新建的项目是已经被删除的项目。 …...

编程日记 2025/7/29 8:16:23

python爬虫概述

0x00 python爬虫概述以豆瓣的选电影模块为例，当查看源代码搜索猫猫的奇幻漂流瓶是搜不到的这时服务器的工作方式应该是这样的客户端浏览器第一次访问其实服务器端是返回的一个框架(html代码) 当客户端浏览器第二次通过脚本等方式进行访问时服务器端才返回的数据…...

编程日记 2025/8/4 4:37:31

实现拖拽图片验证的基本步骤

前端部分 UI 设计： 显示一个滑块和一张背景图（通常是带缺口的图片）。滑块可以是拼图的一块或简单的方块。拖拽功能： 监听滑块的 mousedown、mousemove、mouseup 事件，实现拖拽效果。验证逻辑： 计算滑块最…...

编程日记 2025/8/3 1:11:40

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` —— 获取滚动距离