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

JavaScript概述四（DOM文档对象模型）

news 2025/11/5 11:24:18

1.DOM(Document Object Model)

会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去 操作网页。
整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如 标签 ) 最终都会转换成 js 里面的对象。

1.1 获取页面的元素（通过选择器）

1.1.1 按id属性查找

格式：document.getElementById("id属性值");

此函数只能返回两种情况,要么是0个对象(即为null),要么是1个。返回的是一个具体的对象。 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){//1.获得input标签的对象var input=document.getElementById("mybutton");console.log(input);//2.修改value的属性值var num=3;setInterval(function(){num--;input.value=num;if(num==0){location.href="https://www.baidu.com";}},1000);
}</script></head><body>恭喜你注册成功，<input type="button" id="mybutton" value="3" />秒后跳转界面。		</body>
</html>

最终的效果就是：恭喜你注册成功，3秒后跳转界面-->恭喜你注册成功，2秒后跳转界面-->恭喜你注册成功，1秒后跳转界面-->恭喜你注册成功，0秒后跳转界面;最后直接跳转到百度界面。

1.1.2 通过class查找

格式：document.getElementsByClassName("类名");

返回的是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性 。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.c1{height: 100px;width: 100px;background-color: burlywood;}.c2{height: 100px;width: 100px;background-color:chocolate;}</style><script type="text/javascript">window.onload=function(){//通过class类名获取标签对象var c1=document.getElementsByClassName("c1");console.log(c1);}</script></head><body><div class="c1">跳跳虎</div><div class="c2">东北虎</div><div class="c1">小哭包</div></body>
</html>

 注意：若是使用alert（）函数来输出c1，会显示如下结果

1.1.3 通过标签名查找

格式： document.getElementsByTagName("标签名");

返回的同样是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性 。 

				//通过标签名获取标签对象var c1=document.getElementsByClassName("div");console.log(c1);

1.1.4 通过name属性查找

后期如果想把标签的元素内容发给java服务器,都需要根据name属性值来完成。

格式：document.getElementsByName("name属性的属性值"); 

返回的是一个NodeList集合(同样可看作一个类数组)，比HTMLCollection集合更强大。

注意：只有文档对象才能使用getElement……方法，类数组不具备。当类数组需要使用getElement……方法时，需要使用 getElement……[0]来获取对象。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//1.获得c1所在的对象window.onload=function(){
//				var c1=document.getElementsByClassName("c1");
//				console.log(c1);//2.获得d1里面的2个c1//先获得d1var d1=document.getElementsByClassName("d1");//此时d1是类数组，不是document文档对象//var d1=document.getElementsByClassName("d1")[0];//再获得c1var c1=d1.getElementsByClassName("c1");console.log(c1);}</script></head><body><div class="d1"><div class="c1">孙尚香</div><div class="c1">鲁班七号</div></div><div class="c1">貂蝉</div><p class="c1">吕布</p></body>
</html>

因为var d1=document.getElementsByClassName("d1");//此时d1是类数组，不是document文档对象，当使用var c1=d1.getElementsByClassName("c1")来获得c1时，根本就不能获取到c1。此时只需要更改获取d1的代码即可。

var d1=document.getElementsByClassName("d1")[0];

1.1.5 通过document.querySelector() 来选择元素

选择单个元素：

document.querySelector("#id值");
document.querySelector(".class值");

返回的是单个元素对象或者null,类似id选择器 。

console.log(document.querySelector(".d1"))

选择多个元素：

document.querySelectorAll("标签名1，标签名2……");

				console.log(document.querySelectorAll("div,p"));

返回的是NodeList（类数组）。 

1.2 DOM结构

标签名第一级第二级第三极第四级
divHTMLDivElementHTMLElementElementNode
pHTMLParagraphElementHTMLElementElementNode
inputHTMLInputElementHTMLElementElementNode

1.2.1 Element和Node的区别

在网页当中,所有的标签都是Element,也一定是Node ，但是所有的Node不一定是Element,比如 文字,注释,回车,是Node而不是Element。

 

1.2.2 Element的常用属性

1.children:获得当前元素下面的子级别元素,返回的是一个HTMLCollection集合

2.parentElement:获得当前元素的父级元素

3.nextElementSibling:获得当前元素的下一个兄弟元素

4.previousElementSibling:获得当前元素的前一个兄弟元素 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){//以第一个c1为参照物，作为自己//1.获得自己的孩子var myself=document.getElementsByClassName("c1")[0];var child=myself.children;console.log(child);//2.获得自己的父级元素var parent=myself.parentElement;console.log(parent);//3.获得自己的上一个元素var previous=myself.previousElementSibling;console.log(previous);//4.获得自己的下一个元素var next=myself.nextElementSibling;console.log(next);}</script></head><body><div id="d1"><div>大哥</div><div class="c1"><div>儿子</div></div><div>三弟</div></div><div class="c1">二叔</div></body>
</html>

 

5.input标签修改内容: 通过value属性,但是其他一些双标签,可以使用以下两类属性去修改

  • innerHTML:设置或者获取当前对象的标签内容
  • innerText: 设置或者获取当前对象的文本内容
			//5.将大哥改为giegie,并将颜色设置为redvar previous=myself.previousElementSibling;previous.innerText="giegie";previous.style.color="red";console.log(previous);

 

 

相关文章：

JavaScript概述四（DOM文档对象模型）

1.DOM(Document Object Model) 会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去 操作网页。 整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如 标签 ) 最终都会转换成 js 里面的对象。 1.1 获取页面的元素&#xff08;通过选择器&#xff0…...

编程日记 2023/4/25 9:45:24

【玩转client-go】如何获取 Kubernetes API 客户端的 *rest.Config 对象

目录 1. 使用 kubeconfig 文件 2. 使用 Kubernetes 集群内的 Service Account 3. 直接指定 API Server 的地址和认证信息 4. 使用 genericclioptions.NewConfigFlags() 总结 在使用 Kubernetes API 客户端——client-go 的过程中&#xff0c;我们通常需要获取 *rest.Config 配…...

编程日记 2023/6/1 4:20:32

保护模式段描述符

目前为止&#xff0c;内存还是分段模式&#xff0c;所以想要保护内存&#xff0c;就需要保存段。由于CPU的扩展导致了32位的段基地址和段内偏移&#xff0c;所以16位的段寄存器就无法放下这些信息。现在就需要把这些信息放到内存中&#xff0c;这些信息被封装成特定的段描述符。…...

编程日记 2023/4/25 9:35:22

两个数组的交集

给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 思路&#xff1a; 由于这道题目&#xff0c;输出结果中的每个元素一定是唯一的&#xff0c;也就是说输出的结果的去重的&#xff0c; 同时可…...

编程日记 2023/4/25 9:30:21

原创文章生成器在线版-ai写作生成器

随着人工智能技术的迅猛发展&#xff0c;越来越多的人开始意识到&#xff0c;利用AI可以实现许多以前不可能想象的事情。其中&#xff0c;一种最能体现人工智能技术优势的应用就是“ai原创文章生成器”。它可以为营销从业者提供一种全新的营销推广方式。 那么&#xff0c;什么是…...

编程日记 2023/4/25 9:25:20

打造高性能CSS的九个技巧我是这么做的

在Web开发中&#xff0c;CSS是不可或缺的一部分。但是&#xff0c;如果CSS代码不够优化&#xff0c;会导致页面加载速度变慢&#xff0c;用户体验下降。以下是九个技巧&#xff0c;用于打造高性能的CSS代码。 避免使用通配符选择器&#xff1a;通配符选择器会匹配页面中的所有…...

编程日记 2023/4/25 9:20:17

python tqdm教程

文章目录 1. 搭配迭代器使用2. 设置动态数据打印3. 中途打印不干扰进度条4. 在jupyter中打印不干扰进度条5. 使用gui显示进度条6. 双循环嵌套进度条7. enumerate和tqdm搭配使用参考文献tqdm是python中打印进度条的一个简易工具包，可以方便查看循环的进度。具体见tqdm文档 1. …...

编程日记 2023/4/25 9:15:15

深度学习 - 41.Word2vec、EGES 负采样实现 By Keras

目录 一.引言 二.实现思路 1.样本构建 2.Word2vec 架构 3.EGES 架构 4.基于 NEG 的 Word2vec 架构 三.Keras 实现 Word2vec 1.样本构建 2.模型构建 3.向量获取 四.keras 实现 EGES 1.样本构建 2.模型构建 3.Dot Layer 详解 3.1 init 方法 3.2 call 方法 3.3 完…...

编程日记 2023/4/25 9:10:14

研发管理风险控制

软件研发过程中需要做好风险控制&#xff0c;保证项目按计划发布&#xff0c;下面说明一下个人对软件风险控制的看法 一、规划、技术选型、架构方面提前规避风险 1.选择最熟悉、使用最多的技术 “一个新项目里最好不要使用超过30%的新技术”&#xff0c;我觉得这句话是有一定…...

编程日记 2023/4/25 9:05:12

母婴品牌内容输出怎么做？“四板斧”送你

新媒体时代&#xff0c;信息大爆炸&#xff0c;人们的注意力有限&#xff0c;有噱头和亮点的内容才能博得注意&#xff0c;成为用户关注的焦点。 母婴行业重视品牌效益和产品的质量&#xff0c;毕竟类似“三聚氰胺”的惨剧谁也不希望再发生。母婴产品的质量依赖技术和生产线支…...

编程日记 2023/4/25 9:00:10

【视频】视频存储技术

1、NVR NVR是(网络硬盘录像机)的缩写。NVR最主要的功能是通过网络接收IPC（网络摄像机）设备传输的数字视频码流， 并进行存储、管理，从而实现网络化带来的分布式架构优势。简单来说，通过NVR，可以同时观看、浏览、回放、管理、存储多个网络摄像机。NVR是x86架构储存+监控软…...

编程日记 2023/4/25 8:55:09

【C/C++】MySQL 为什么选择 B+ 树作为底层数据结构

为什么MySQL底层数据结构选择B树&#xff1f;&#xff08;而不是B树等其他数据结构&#xff09; B树非叶子节点&#xff0c;不存放数据记录&#xff0c;仅存放指针与关键字&#xff0c;所以一个B树非叶子节点可以存放更多子节点信息&#xff0c;有利于降低树高度&#xff0c;从…...

编程日记 2023/4/25 8:50:07

17、嵌入式Servlet容器

文章目录 1、切换嵌入式Servlet容器1.1、默认支持的webServer1.2、切换服务器 2、原理2.1、ServletWebServerApplicationContext2.2、作用2.3、ServletWebServerFactoryAutoConfiguration2.4、作用2.5、ServletWebServerFactoryConfiguration 配置类2.6、web服务器工厂作用 3、…...

编程日记 2023/4/25 8:45:05

倾斜摄影三维模型转换3DTILTES格式遇到的常见问题

倾斜摄影三维模型转换3DTILTES格式遇到的常见问题 将倾斜摄影三维模型从OSGB格式转换为3DTILES格式时&#xff0c;常见的问题包括&#xff1a; 1、3D Tiles生成时间较长&#xff1a;由于3D Tiles是一种高效的地理数据存储格式&#xff0c;能够支持海量的空间数据呈现和查询&am…...

编程日记 2023/4/25 8:40:03

手机如何访问电脑文件？（iOS和Android）

可以通过手机访问电脑文件吗&#xff1f; “我需要在我的电脑上查看一个文件&#xff0c;但我现在在外面无法实际访问它。我可以通过手机访问我的电脑文件吗&#xff1f;” 答案当然是可以的&#xff0c;无论您使用的是iOS设备还是Android设备&#xff0c;您都可以通过手机…...

编程日记 2023/4/25 8:35:02

TI在物联网和AI边缘计算中落伍了吗？

摘要&#xff1a;本文介绍一下TI在边缘计算工作中所做的努力。 发明“人工智能”这个term的老头儿也不会想到人工智能在中国有多火。 不管是懂还是不懂&#xff0c;啥东西披上“人工智能“的面纱都能瞬间成为大项目。 学习AI 的年轻人认识NVIDIA&#xff0c;可能不太知道DSP是…...

编程日记 2023/4/25 8:30:01

LoadRunner参数化最佳实践：让你的性能测试更加出色！

距离上次使用loadrunnr 已经有一年多的时间了。初做测试时在项目中用过&#xff0c;后面项目中用不到&#xff0c;自己把重点放在了工具之外的东西上&#xff0c;认为性能测试不仅仅是会用工具&#xff0c;最近又想有一把好的利器毕竟可以帮助自己更好的完成性能测试工作。这算…...

编程日记 2023/4/25 8:24:59

软件测试工程师需要达到什么水平才能顺利拿到 20k 无压力？

最近有粉丝朋友问&#xff1a;软件测试员需要达到什么水平才能顺利拿到 20k 无压力&#xff1f; 这里写一篇文章来详细说说&#xff1a; 目录 扎实的软件测试基础知识&#xff1a;具备自动化测试经验和技能&#xff1a;熟练掌握编程语言&#xff1a;具备性能测试、安全测试、全…...

编程日记 2023/4/25 8:19:58

RabbitMQ-高级篇

服务异步通信-高级篇 消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D6S1iAs7-1681919354777)(assets/image-20210718155003157.png)] 1.消息可靠性 消息从发送&#x…...

编程日记 2023/4/25 8:14:57

深度学习_Learning Rate Scheduling

我们在训练模型时学习率的设置非常重要。 学习率的大小很重要。如果它太大&#xff0c;优化就会发散&#xff0c;如果它太小&#xff0c;训练时间太长&#xff0c;否则我们最终会得到次优的结果。其次&#xff0c;衰变率同样重要。如果学习率仍然很大&#xff0c;我们可能会简…...

编程日记 2023/4/25 8:09:56

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/11/3 20:04:18

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/11/1 7:16:32

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/11/3 3:52:10

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/11/2 21:40:10

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/11/2 11:31:10

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/11/4 13:40:14

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/10/28 19:03:33

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/1 3:10:07

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/1 8:05:41