拥有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返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/152090.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++——C++入门（二）

C++——C++入门（二）

C 前言一、引用引用概念引用特性常引用使用场景传值、传引用效率比较值和引用的作为返回值类型的性能比较 引用和指针的区别 二、内联函数概念特性知识点提升 三、auto关键字类型别名思考auto简介auto的使用细则auto不能推导的场景 四、基于范围的for循环范围for的语法范围for的…
阅读更多...
【AD9361 数字接口CMOS LVDSSPI】B 并行数据之CMOS 续

【AD9361 数字接口CMOS LVDSSPI】B 并行数据之CMOS 续

续【AD9361 数字接口CMOS &LVDS&SPI】B 并行数据之CMOS 数据总线空闲和周转周期 &#xff08;CMOS&#xff09; P0_D[11&#xff1a;0]和P1_D[11&#xff1a;0]总线信号通常由BBP或AD9361有源驱动。在任何空闲期间&#xff0c;两个组件都会忽略数据总线值。但是&…
阅读更多...
数据结构时间复杂度（补充）和空间复杂度

数据结构时间复杂度（补充）和空间复杂度

Hello&#xff0c;今天事10月27日&#xff0c;距离刚开始写博客已经过去挺久了&#xff0c;我也不知道是什么让我坚持这么久&#xff0c;但是学校的课真的很多&#xff0c;很少有时间多出来再学习&#xff0c;有些科目马上要考试了&#xff0c;我还不知道我呢不能过哈哈哈&…
阅读更多...
pytest-yaml 测试平台-3.创建执行任务定时执行用例

pytest-yaml 测试平台-3.创建执行任务定时执行用例

前言 当项目用例编写完成后&#xff0c;需设置执行策略&#xff0c;可以用到定时任务设置每天几点执行。或者间隔几个小时执行一次。 创建定时任务 创建任务 勾选需要执行的项目以及运行环境 触发器可以支持2种方式&#xff1a;interval 间隔多久触发和 cron 表达式定时执行…
阅读更多...
Qt之自定义事件QEvent

Qt之自定义事件QEvent

在Qt中，自定义事件的步骤大概如下： 1.创建自定义事件，自定义事件需要继承QEvent 2.使用QEvent::registerEventType()注册自定义事件类型，事件的类型需要在 QEvent::User 和 QEvent::MaxUser 范围之间，在QEvent::User之前是预留给系统的事件 3.使用sendEvent() 和 postEv…
阅读更多...
windows下-mysql环境配置，以及使用navicat可视化数据库，便捷撰写sql语句。

windows下-mysql环境配置，以及使用navicat可视化数据库，便捷撰写sql语句。

文章目录 MySQL 连接到本地MySQL 下载MySQL连接基本SQL操作语句创建并查看数据库删除数据库修改数据库插入、删除、修改数据 图形化界面展示数据库 Navicat 基础操作连接本地的mysql数据库撰写sql语句 MySQL 连接到本地 MySQL 下载 直接系统自带应用商城下载&#xff0c;安装最…
阅读更多...
【iPad已停用】解锁教程

【iPad已停用】解锁教程

iPad多次输错密码时&#xff0c;会自动锁定并停用&#xff0c;这时候你可以使用iTuens或Tenorshare进行解锁。 一、使用iTunes解锁 下载并安装iTunes 使用数据线将iPad连接上电脑 让iPad进入恢复模式&#xff0c;同时安装iPad电源键和Home键&#xff0c;直到Logo出现也不要松…
阅读更多...
Geom2d_OffsetCurve解析

Geom2d_OffsetCurve解析

Geom2d_OffsetCurve (const Handle< Geom2d_Curve > &C, const Standard_Real Offset, const Standard_Boolean isNotCheckC0Standard_False) chatgpt解析&#xff1a;Geom2d_OffsetCurve 是 OpenCascade 中的函数&#xff0c;用于构造偏移曲线。下面是对该函数的参…
阅读更多...
matlab simulink 四旋翼跟拍无人机仿真

matlab simulink 四旋翼跟拍无人机仿真

1、内容简介 略 7-可以交流、咨询、答疑 2、内容说明 四旋翼跟拍无人机仿真 四旋翼、无人机 需求分析 背景介绍 无人飞行机器人&#xff0c;是无人驾驶且具有一定智能的空中飞行器。这是一种融合了计算机技术、人工智能技术、传感器技术、自动控制技术、新型材料技术、导航…
阅读更多...
RSA:基于小加密指数的攻击方式与思维技巧

RSA:基于小加密指数的攻击方式与思维技巧

目录 目录 目录 零、前言 一、小加密指数爆破 [FSCTF]RSA签到 思路&#xff1a; 二、基于小加密指数的有限域开根 [NCTF 2019]easyRSA 思路&#xff1a; 三、基于小加密指数的CRT [0CTF 2016] rsa 思路&#xff1a; 零、前言 最近&#xff0c;发现自己做题思路比较…
阅读更多...
【java学习—九】模板方法(TemplateMethod)设计模式（4）

【java学习—九】模板方法(TemplateMethod)设计模式（4）

文章目录 1. 在java中什么是模板2. 模板方法设计解决了什么问题&#xff1f;3. 代码化理解 1. 在java中什么是模板 抽象类体现的就是一种模板模式的设计&#xff0c;抽象类作为多个子类的通用模板&#xff0c;子类在抽象类的基础上进行扩展、改造&#xff0c;但子类总体上会保留…
阅读更多...
【考研数学】数学“背诵”手册 | 需要记忆且容易遗忘的知识点

【考研数学】数学“背诵”手册 | 需要记忆且容易遗忘的知识点

文章目录 引言一、高数常见泰勒展开 n n n 阶导数公式多元微分函数连续、可微、连续可偏导之间的关系多元函数极值无条件极值条件极值 三角函数的积分性质华里士公式&#xff08; “点火”公式 &#xff09;特殊性质 原函数与被积函数的奇偶性结论球坐标变换公式 二、线代施密特…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023