拥有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分布式操作系统，也不是头脑凭空发热，是基于我们之前的大量产品设计、经验逐渐一步步做起来。当…...
【Javascript】定时器
目录 延迟执行 定时执行 清除定时任务 延迟执行 setTimeout(function(){}, 毫秒) console.log(1); console.log(2); console.log(3); setTimeout(function (){console.log(5) },5000) console.log(4);setTimeout(function (){ console.log(5) },5000) 设定了一个任务&…...
基于stm32的ADC读取烟雾报警器的数值
本文想要设计一个设计一个有stm32控制的烟雾报警系统。通过MQ-2烟雾报警器将获取模拟的数值传递给stm32的ADC外设并在串口助手上显示对应的电压值。烟雾报警器浓度越高，他的电压就越高，但是不会超过3.3V。设置一个电压临界值，当传输回来的电压…...
无需更换vue-cli 脚手架 uniapp-搭建项目-H5-低版本安卓IOS兼容问题（白屏）（接口请求异常）
✨求关注~ 💻博客：www.protaos.com I. 简介 A. UniApp项目概述 B. 白屏和接口请求异常问题的背景 II. 白屏问题 A. 问题描述 1、uniapp 打包H5内嵌入APP内、低版本手机系统访问白屏问题 B. 问题根本原因 1、低版本手机系统 自带的webview内核不支持ES6语…...
【IO面试题 四】、介绍一下Java的序列化与反序列化
文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。 面试官：介绍一下Java的序列化与…...
M1本地部署Stable Diffusion
下载安装 参考博客: 在Mac上部署Stable Diffusion（超详细，AI 绘画入门保姆级教程） 安装需要的依赖库 brew install cmake protobuf rust python3.10 git wget 可能中途会存在下载报错或者下载卡主的问题,需要切国内源 brew进行替换源: …...
java中的内存分配
目录 1.堆内存 2.栈内存 3.常量池 4.寄存器 5.示例 6.总结 1.堆内存 堆用来存放程序中动态生产的数据，如new出来的对象。 通过new方式创建的对象，数组及字符串都有自己的内存地址。 方法调用完毕后，方法中new出来的对象就会变成垃圾…...
Matter.js 插件：matter-wrap（世界是圆的）
本文简介 点赞 关注 收藏 学会了 记得以前看爆笑校园里有一集讲到，一个人对着前面开了一枪，过了一阵子弹打中他自己的后脑勺。作者想通过这个冷笑话告诉大家一件事：地球是圆的。 在 Matter.js 世界里，默认是没有边界的&#…...
HCIA --- ACL（访问控制列表）
ACL访问控制列表 一、作用 访问控制 --- 在路由器流量进或出的接口上，匹配流量产生动作---允许、拒绝定义感兴趣流量 --- 抓取流量，之后给到其他的策略，让其他策略进行工作； 二、匹配规则 至上而下逐一匹配，上条匹…...
Xcode自定义快捷键
一、新建脚本 1. 编写脚本 把脚本sh文件保存在安全的目录，不会被删除 我这里主要是两个常用的： 1.打开终端: xcode-terminal.sh #!/bin/shif [ -n "$XcodeProjectPath" ]; then open -a Terminal "$XcodeProjectPath"/.. elseo…...
jmeter界面压测过程卡死解决思路
1、排查压测机的资源是否充足； 2、检查jmeter压测脚本，除聚合报告的所有组件关闭； 我在压测过程中出现频繁卡死，就是查看结果数和断言结果信息量过多导致： 3、直接用非gui界面形式，也就是脚本形式压测。...