拥有DOM力量的你究竟可以干什么
如果你希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始！
查找HTML元素
| document.getElementById(id) | 通过元素 id 来查找元素 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="myDiv">Hello, world!</div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var myDiv = document.getElementById("myDiv");console.log(myDiv); // 输出 <div id="myDiv">Hello, world!</div>
</script>
</body>
</html>| document.getElementsByTagName(name) | 通过标签名来查找元素 |
这个方法接收一个参数 name，该参数是一个字符串，表示你想要选择的元素的标签名称
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<p>一段话</p>
<p>一段话1</p>
<p>一段话2</p><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var p = document.getElementsByTagName("p");console.log(p);console.log(p[1]);
</script>
</body>
</html>
返回的 NodeList 对象是一个“类数组”，可以像数组一样使用。你可以通过索引访问特定的元素，例如，document.getElementsByTagName("p")[0] 将返回第一个 <p> 元素
需要注意的是，NodeList 是“静态的”，也就是说，它并不会反映后续对文档的修改。如果在后续对文档进行了修改（例如，添加或删除了元素），那么你需要再次调用 getElementsByTagName 来获取最新的元素（查找HTML元素的方法的性质都类似，类比即可！）
| document.getElementsByClassName(name) | 通过类名来查找元素 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button class="btn">我是按钮</button><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var btn = document.getElementsByClassName("btn");console.log(btn);
</script>
</body>
</html>
| document.querySelector(CSS选择器) | 通过CSS选择器选择一个元素 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button class="btn">我是按钮</button><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var btn = document.querySelector(".btn");console.log(btn);
</script>
</body>
</html>
| document.querySelectorAll(CSS选择器) | 通过CSS选择器选择多个元素 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<ul class="list"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ul><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var list = document.querySelectorAll(".list li");console.log(list);
</script>
</body>
</html>
获取HTML元素的值
| 元素节点.innerText | 获取 HTML元素的 inner Text |
| 元素节点.innerHTIML | 获取 HTML元素的 inner HTML |
| 元素节点.属性 | 获取 HTIML 元素的属性值 |
| 元素节点getAttribute(attribute) | 获取 HTIML 元素的属性值 |
| 元素节点style.样式 | 获取 HTML 元素的行内样式值 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDN</a><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var a = document.getElementById("a");console.log(a.innerText);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="box"><h1>我是Box中的大标题</h1>
</div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");console.log(box.innerHTML);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDN</a><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var a = document.getElementById("a");console.log(a.href);console.log(a.getAttribute("href");console.log(a.getAttribute(""));
<!-- 创建一个超链接，默认为空，设置href属性为https://www.csdn.net/ ，使用JavaScript代码读取href属性-->
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");console.log(box.style.width);
</script>
</body>
</html>
小知识：
如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将 - 后的字母大写，我们通过style属性设置的样式都是行内样式，同样的获取也是行内样式，而行内样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important
改变HTML的值
| 元素节点.innerText = new text content | 改变元素的 inner Text |
| 元素节点.innerHTML = new html content | 改变元素的 inner HTML |
| 元素节点.属性 = new value | 改变 HTML 元素的属性值 |
| 元素节点.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| 元素节点.style.样式 = new style | 改变 HTML 元素的行内样式值 |
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button id="btn">我是按钮</button><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var btn = document.getElementById("btn");btn.innerText = "我是JavaScript的按钮";console.log(btn);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="box"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");box.innerHTML = "<h1>我是Box中的大标题</h1>";console.log(box);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<a id="a" href="">打开百度，你就知道！</a><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var a = document.getElementById("a");a.href="https://www.baidu.com";console.log(a);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");box.style.background = "green";console.log(box);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");box.style.background = "green";console.log(box);
</script>
</body>
</html>添加HTML元素
| document.createElement(element) | 创建 HTML 元素节点 |
| document.createAttribute(attribute) | 创建 HTML 属性节点 |
| document.createTextNode(text) | 创建 HTML 文本节点 |
| 元素节点.removeChild(element) | 删除 HTML 元素 |
| 元素节点.appendChild(element) | 添加 HTML 元素 |
| 元素节点.replaceChild(element) | 替换 HTML 元素 |
| 元素节点.insertBefore(element) | 在指定的子节点前面插入新的子节点 |
创建不代表是添加到网页上了！！！
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var a = document.createElement("a");a.href = "https://www.csdn.net"; // 设置链接地址var text = document.createTextNode("CSDN");a.appendChild(text); // 将链接文本添加到链接元素中document.getElementsByTagName("body")[0].appendChild(a);var ul = document.createElement("ul");var li1 = document.createElement("li");var text1 = document.createTextNode("列表项1");li1.appendChild(text1);ul.appendChild(li1);var li2 = document.createElement("li");var text2 = document.createTextNode("列表项2");li2.appendChild(text2);ul.appendChild(li2);var li3 = document.createElement("li");var text3 = document.createTextNode("列表项3");li3.appendChild(text3);ul.appendChild(li3);var li4 = document.createElement("li");var text4 = document.createTextNode("列表项4");li4.appendChild(text4);ul.appendChild(li4);var li5 = document.createElement("li");var text5 = document.createTextNode("列表项5");li5.appendChild(text5);ul.appendChild(li5);document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>
</html>创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<ul id="ul"><li id="first">列表项1</li><li>列表项2</li><li>列表项3</li><li id="last">列表项4</li>
</ul><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var ul = document.getElementById("ul");var first = document.getElementById("first");var last = document.getElementById("last");/*删除第一个*/ul.removeChild(first);/*替换最后一个*/var replaceLi = document.createElement("li");replaceLi.innerHTML = "列表4的替换";ul.replaceChild(replaceLi, last);
</script>
</body>
</html>
查找HTML父子元素节点
| 元素节点.parentNode | 返回元素的父节点 |
| 元素节点.parentElement | 返回元素的父元素 |
| 元素节点.childNodes | 返回元素的一个子节点的数组（包含空白文本Text节点） |
| 元素节点.children | 返回元素的一个子元素的集合（不包含空白文本Text节点） |
| 元素节点.firstChild | 返回元素的第一个子节点（包含空白文本Text节点） |
| 元素节点.firstElementChild | 返回元素的第一个子元素（不包含空白文本Text节点） |
| 元素节点.lastChild | 返回元素的最后一个子节点（包含空白文本Text节点） |
| 元素节点.lastElementChild | 返回元素的最后一个子元素（不包含空白文本Text节点） |
| 元素节点.previousSibling | 返回某个元素紧接之前节点（包含空白文本Text节点） |
| 元素节点.previousElementSibling | 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点） |
| 元素节点.nextSibling | 返回某个元素紧接之后节点（包含空白文本Text节点） |
| 元素节点.nextElementSibling | 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点） |
相关文章：
拥有DOM力量的你究竟可以干什么
如果你希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始！ 查找HTML元素 document.getElementById(id) 通过元素 id 来查找元素 <!DOCTYPE html> <html> <head><meta charset…...
GnuTLS recv error (-110): The TLS connection was non-properly terminated
ubuntu git下载提示 GnuTLS recv error (-110): The TLS connection was non-properly terminated解决方法 git config --global --unset http.https://github.com.proxy...
Notepad++安装插件和配置快捷键
Notepad是一款轻量级、开源的文件编辑工具，可以编辑、浏览文本文件、二进制文件、.cpp、.java、*.cs等文件。Notepad每隔1个月，就有一个新版本，其官网是： https://github.com/notepad-plus-plus/notepad-plus-plus。这里介绍其插件…...
iOS Autolayout 约束设置【顺序】的重要性！
0x00 顺序不同，结果不同 看图说话 1 代码是这样滴~ 设置好约束，让 4 个按钮，宽度均分~ 结果如上图 [_pastButton.topAnchor constraintEqualToAnchor:_textView.bottomAnchor constant:6].active YES;[_pastButton.leftAnchor constraintEq…...
Echarts渲染不报错但是没有内容
🔥博客主页： 破浪前进 🔖系列专栏： Vue、React、PHP ❤️感谢大家点赞👍收藏⭐评论✍️ 问题：在开发项目的时候使用了Echarts但是好端端的忽然就不渲染了 感觉很无语啊，毕竟好好的就不渲染了&am…...
数据结构 | 算法的时间复杂度和空间复杂度【详解】
数据结构 | 算法的时间复杂度和空间复杂度【详解】 1. 什么是数据结构？ 数据结构(Data Structure)是计算机存储、组织数据的方式，指相互之间存在一种或多种特定关系的数据元素的集合。 2. 什么是算法？ 算法(Algorithm):就是定义良好的计算过…...
高级篇之ENC编码器多机位帧同步配置详解
高级篇之ENC编码器多机位帧同步配置详解 一 帧同步方案多样性1. 配合vMIX导播的帧同步方案3. 配合硬件导播的帧同步方案3. 配合芯象导播的帧同步 二 帧同步方案1实现步骤1. 准备设备2. 搭建环境3 配置设备3.1 配置固定机位3.2 配置帧同步转发端3.3 配置vMIX 三 效果对比1 不开帧…...
matlab simulink 四旋翼跟拍无人机仿真
1、内容简介 略 7-可以交流、咨询、答疑 2、内容说明 四旋翼跟拍无人机仿真 四旋翼、无人机 需求分析 背景介绍 无人飞行机器人，是无人驾驶且具有一定智能的空中飞行器。这是一种融合了计算机技术、人工智能技术、传感器技术、自动控制技术、新型材料技术、导航…...
jenkins、ant、selenium、testng搭建自动化测试框架
如果在你的理解中自动化测试就是在eclipse里面讲webdriver的包引入，然后写一些测试脚本，这就是你所说的自动化测试，其实这个还不能算是真正的自动化测试，你见过每次需要运行的时候还需要打开eclipse然后去选择运行文件吗ÿ…...
【阅读和学习代码】VoxelNet
文章目录 将点特征 转换为 voxel 特征稀疏张量 到 稠密张量，反向索引参考博客 将点特征 转换为 voxel 特征 https://github.com/skyhehe123/VoxelNet-pytorch/blob/master/data/kitti.py 【Python】np.unique() 介绍与使用 self.T ： # maxiumum numbe…...
【23种设计模式】接口隔离原则
个人主页：金鳞踏雨 个人简介：大家好，我是金鳞，一个初出茅庐的Java小白 目前状况：22届普通本科毕业生，几经波折了，现在任职于一家国内大型知名日化公司，从事Java开发工作 我的博客&am…...
【Python机器学习】零基础掌握PartialDependenceDisplay检验、检查
如何更好地理解模型对特定特征的依赖性？如何使用历史数据来预测明天股票市场的走势？ 想象一下，作为一名数据分析师，面对海量的数据，如何准确地预测明天股票市场的走势？这是一个复杂且具有挑战性的问题。但别担心，有一种神奇的工具可以帮助解析模型对各种因素（特征）的…...
Jmeter的接口自动化测试
在去年实施了一年的三端（PC、无线M站、无线APP【Android、IOS】）后，今年7月份开始，我们开始进行接口自动化的实施，目前已完成了整个框架的搭建以及接口的持续测试集成。今天做个简单的分享。 在开始自动化投入前&#…...
windows c++获取开机启动项
#include <iostream> #include <Windows.h> #include <string> #define RUN_LOCATION "Software\\Microsoft\\Windows\\CurrentVersion\\Run" int main() { HKEY hKey; LONG result; // 打开注册表键 result = RegOpenKeyExA(HKEY_CU…...
【C++初阶】类和对象——构造函数析构函数拷贝构造函数
个人主页点击直达：小白不是程序媛 C系列专栏：C头疼记 目录 前言 类的6个默认成员函数 构造函数 概念 构造函数的特性 析构函数 概念 析构函数特性 拷贝构造函数 概念 拷贝构造函数特性 总结 前言 上篇文章我们对于C中的类有了初步的认识和…...
Java实现SQL分页
在日常开发需要对数据进行分页，配置如下 <!-- baomidou --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.0</version></dependency> 在控…...
软件测试进阶篇----自动化测试脚本开发
自动化测试脚本开发 一、自动化测试用例开发 1、用例设计需要注意的点 2、设计一条测试用例 二、脚本开发过程中的技术 1、线性脚本开发 2、模块化脚本开发（封装线性代码到方法或者类中。在需要的地方进行调用） 3、关键字驱动开发：selen…...
rust std
目录 一，std基本数据结构 1，std::option 2，std::result 二，std容器 1，vector 三，std算法 1，排序 2，二分 （1）vector二分 （2）…...
SpringMVC（下）
1、拦截器： 1、拦截器的配置: SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor <!--配置拦截器--><mvc:interceptors><!--对所有的请求进行拦截--><!--<bean class"com.songzhishu.m…...
分布式操作系统的必要性及重要性
总有人在各个平台留言或者私信问LAXCUS分布式操作系统的各种问题，尤其是关于分布式操作系统的应用市场、价值、意义之类的问题。我们团队做LAXCUS分布式操作系统，也不是头脑凭空发热，是基于我们之前的大量产品设计、经验逐渐一步步做起来。当…...
避坑指南：ESP32安全功能配置的那些‘坑’——从芯片版本校验到eFuse烧写（Flash加密+SecureBoot V2）
ESP32安全功能配置实战避坑指南：从芯片校验到密钥烧录全流程解析 在物联网设备开发中，ESP32因其出色的性价比和丰富的功能成为众多开发者的首选。然而，当涉及到设备安全功能配置时，不少开发者都会遇到各种"坑"——从芯片…...
PHP的扩展的生命周期的庖丁解牛
"PHP 扩展 (Extension)"的生命周期，常被误解为“一个 .so 或 .dll 文件被加载进内存”那么简单。 但本质上，它是 C 语言编写的底层模块与 PHP Zend 引擎之间的一次“深度联姻”。 它的生命周期严格绑定在 PHP 进程（或 FPM 子进程&a…...
YOLOv8训练Visidron小目标检测数据集YOLO训练结果模型➕数据集可直接使用在读博士，欢迎打扰
YOLOv8训练Visidron小目标检测数据集 YOLO训练结果模型➕数据集 可直接使用 在读博士，欢迎打扰...
Picasso设计稿转代码工具全攻略：从安装到精通
Picasso设计稿转代码工具全攻略：从安装到精通 【免费下载链接】Picasso 一款UI自动生成代码插件，提供UI自动生成代码全流程解决方案。 项目地址: https://gitcode.com/gh_mirrors/picasso3/Picasso 解锁效率：Picasso的3大核心优势 当…...
从Dirty COW到内核攻防：竞态条件漏洞的现代利用与防御思考
1. Dirty COW漏洞：一个潜伏十年的"定时炸弹" 2016年10月，一个名为Dirty COW的Linux内核漏洞震惊了整个安全界。这个漏洞的特殊之处在于，它从2007年就潜伏在Linux内核中，历经近十年才被发现。更可怕的是，它影…...
Scientific Reports论文返修后，从接受到正式上线的完整时间线与关键节点（附校样避坑指南）
Scientific Reports论文从接受到正式上线的全流程解析与实战指南 当你收到那封梦寐以求的"Accept"邮件时，兴奋之余是否也对后续流程感到迷茫？从论文接受到正式上线，Springer Nature的生产流程看似标准却暗藏诸多细节。本文将为你拆…...
百川2-13B+OpenClaw：学术论文参考文献自动校对系统
百川2-13BOpenClaw：学术论文参考文献自动校对系统 1. 为什么需要参考文献自动化校对 去年写博士论文时，我曾在参考文献格式上栽过跟头。距离截稿还有48小时，导师突然指出我的参考文献列表存在三处格式不一致——有的作者名全大写࿰…...
AI赋能嵌入式：借助快马平台为单片机生成轻量级语音唤醒代码框架
AI赋能嵌入式：借助快马平台为单片机生成轻量级语音唤醒代码框架 最近在做一个智能家居的小项目，需要给STM32单片机加上语音唤醒功能。作为嵌入式开发者，最头疼的就是把AI模型移植到资源有限的单片机上。好在发现了InsCode(快马)平台…...
ai赋能openclaw：通过快马平台实现智能路径规划与自适应抓取
最近在做一个智能抓取机器人OpenClaw的项目，正好体验了一把AI辅助开发的便利。这个项目需要实现机械爪在复杂环境中的自主路径规划和自适应抓取，过程中发现InsCode(快马)平台的AI功能确实帮了大忙，分享下具体实现思路和踩坑经验。 场景搭建与…...
实战指南：基于快马ai与ubuntu24.04从零部署高可用个人博客系统
今天想和大家分享一个实战项目：在Ubuntu 24.04上从零部署一个高可用的个人博客系统。这个系统不仅前后端分离，还用到了Nginx反向代理和Gunicorn应用服务器，非常适合想学习全栈开发的朋友练手。 系统架构设计 整个博客系统采用经典的前后端分离…...