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

HTML之JavaScript DOM编程获取元素的方式

article 2026/4/8 6:36:54

HTML之JavaScript DOM编程获取元素的方式

            1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title><script>/*步骤：1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素3.对元素进行操作1.操作元素的属性2.操作元素的样式3.操作元素的文本4.增删元素*/function fun1() {// 1 获得document// 2 通过document获得元素var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个console.log(aaa)}function fun2() {// 根据标签名获取多个元素，返回数组var bbb = document.getElementsByTagName("input")for (i = 0; i < bbb.length; i++) {console.log(bbb[i])}}function fun3() {// 根据元素属性名获取元素，返回数组， 循环迭代时慎用for in 会获取到其他的东西var ccc = document.getElementsByName("aaa")for (i = 0; i < ccc.length; i++) {console.log(ccc[i])}}function fun4() {// 根据元素class属性名获取元素var ddd = document.getElementsByClassName("a")for (i = 0; i < ddd.length; i++) {console.log(ddd[i])}}function fun5() {// 先获取父元素var div01 = document.getElementById("div01")// 获取所有子元素var cs = div01.children // 获取全部子元素for (i = 0; i < cs.length; i++) {console.log(cs[i])}console.log(div01.firstElementChild)// 通过父元素获取第一个子元素console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素}// 通过子元素获取父元素function fun6() {// 获取子元素var mmm = document.getElementById("username")console.log(mmm.parentElement) // 通过子元素获取父元素}// 通过当前元素获取兄弟元素function fun7() {var nnn = document.getElementById("username")console.log(nnn.previousElementSibling) // 获取前面的第一个元素console.log(nnn.nextElementSibling) // 获取后面的第一个元素}</script>
</head>
<body><div id="div01"><input type="text" class="a" id="username" name="aaa" /><input type="text" class="b" id="password" name="aaa" /><input type="text" class="a" id="email" /><input type="text" class="b" id="address" /></div><input type="text" /><hr><input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01" /><input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02" /><input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" /><input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04" /><hr><input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" /><input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" /><input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07" /><input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08" />
</body>
</html>

相关文章：

HTML之JavaScript DOM编程获取元素的方式

HTML之JavaScript DOM编程获取元素的方式 1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var…...

编程日记 2026/4/8 6:36:54

路由器的WAN口和LAN口有什么区别？

今时今日&#xff0c;移动终端盛行的时代&#xff0c;WIFI可以说是家家户户都有使用到的网络接入方式。那么路由器当然也就是家家户户都不可或缺的设备了。而路由器上的两个实现网络连接的基础接口 ——WAN 口和 LAN 口&#xff0c;到底有什么区别&#xff1f;它们的功能和作用…...

编程日记 2026/4/6 8:19:13

人工智能（AI）：科技新纪元的领航者

摘要 人工智能&#xff08;AI&#xff09;作为当今科技领域最具变革性的力量之一&#xff0c;正以惊人的速度重塑着我们的世界。本文旨在全面且专业地介绍人工智能&#xff0c;涵盖其定义、发展历程、关键技术、应用领域、面临的挑战以及未来展望等方面&#xff0c;以期为读者…...

编程日记 2026/4/4 2:21:53

CSS通过webkit-scrollbar设置滚动条样式

查看::-webkit-scrollbar-*各项关系 以下图为例&#xff0c;可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度&#xff0c;再设置overflow: auto&#xff0c;最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...

编程日记 2026/4/5 2:47:53

Seata1.5.2学习(二)——使用分布式事务锁@GlobalLock

目录 一、创建数据库 二、配置consumer-service 1.pom.xml 2.application.properties 3.启动类 4.其他代码 三、配置provider-service 1.pom.xml 2.application.properties 3.启动类 4.其他代码 四、分布式事务问题演示与解决办法 (一)分布式事务问题演示 (二)…...

编程日记 2026/4/4 9:40:57

三级分类bug解决

文章目录 前端后端 前端 <!DOCTYPE html> <html xmlns:th"http://www.thymeleaf.org" lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&q…...

编程日记 2026/2/23 3:11:45

华为 网络安全 认证

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 华为 网络安全 认证&#xff1a;保障信息安全的重要一环 在数字化时代的今天&#xff0c;网络安全成为了企业和个人都需要高度重视的问题。尤其是在企业信息化的…...

编程日记 2026/4/6 20:16:15

企业金融数字场景平台：架构设计、实践与未来趋势

随着数字化转型的深入&#xff0c;企业金融领域正经历着前所未有的变革。中国民生银行信息科技部赵鑫团队提出的《企业金融数字场景平台》架构设计&#xff0c;不仅展现了金融科技的前沿应用&#xff0c;也为行业提供了宝贵的实践经验和未来发展的新视角。 架构设计&#xff1…...

编程日记 2026/4/4 14:08:57

网络运维学习笔记 019 HCIA-Datacom综合实验03

文章目录 综合实验3实验需求一&#xff1a;A公司网络规划二&#xff1a;B公司网络规划 配置一、ip、vlan、vlanif&#xff0c;stp、eth-trunkSW1SW2SW3R1 二、ospfSW1R1 三、NATR1ISP 四、拒绝ping允许httpSW1 五、右半部分vlan、dhcp、ospf、NATSW4R2 综合实验3 实验需求 一&…...

编程日记 2026/4/5 8:40:11

Python--函数进阶（上）

1. 参数深入理解 1.1 参数传递的内存机制 Python中参数传递的是内存地址&#xff08;引用传递&#xff09;&#xff0c;而非值拷贝。这意味着&#xff1a; 可变对象&#xff08;列表、字典&#xff09;在函数内修改会影响外部变量。不可变对象&#xff08;数字、字符串&…...

编程日记 2026/2/13 15:35:09

Linux 常见面试题汇总

在当今数字化时代&#xff0c;Linux 作为一种开源、稳定且高效的操作系统&#xff0c;在服务器领域占据着举足轻重的地位。无论是运维工程师、开发人员还是系统管理员&#xff0c;掌握 Linux 相关知识都成为了必备技能。这篇博客将为大家汇总一些常见的 Linux 面试题&#xff0…...

编程日记 2026/4/6 2:11:10

网络运维学习笔记 015网工初级（HCIA-Datacom与CCNA-EI）NAT网络地址转换

文章目录 NAT(Network Address Translation&#xff0c;网络地址转换)思科&#xff1a;1&#xff09;PAT2&#xff09;静态端口转换 华为&#xff1a;1&#xff09;EasyIP2&#xff09;NAT Server静态NAT&#xff1a;动态NAT&#xff1a;实验1&#xff1a;在R1上配置NAPT让内网…...

编程日记 2026/4/4 9:09:53

蓝桥杯刷题25.2.22|打卡

一、幸运数 3491 谨记&#xff1a;使用函数&#xff0c;拆分成多个小问题&#xff0c;不容易出错 #include <iostream> using namespace std; //计算位数 int check(int a){int count0;while(a){aa/10;count;}return count; } bool fun(int sum){int countcheck(sum);int…...

编程日记 2026/4/4 14:51:47

学习笔记-沁恒第五讲-米醋

一&#xff0c;设置音量 上次 这次 #include "uart.h" #include "debug.h" void audio_init() { Usart3_Init(); } void audio_play(u8 num) { u8 string[]{0x7e,0x05,0x41,0x00,num,0x05^0x41^0x00^num,0xef}; u8 i; for(i0;i<7;i) { USART_Se…...

编程日记 2026/2/23 20:46:38

骁勇善战的量化利器：多因子模型【量化理论】

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲alpha策略制定后的测试问题 风险模型雏形 股票因子受多种因素影响&#xff0c;其价格由多种因素决定&#xff0c;所谓的多因子策略就是要发掘诸如此类的因子&#xff0c;以一种合理的方…...

编程日记 2026/4/7 20:39:06

Android Loader机制解析

参考: Android Loader 机制...

编程日记 2026/2/26 23:55:16

使用Docker部署SearXNG

SearXNG 搜索引擎 SearXNG 是一个整合了超过70个搜索服务结果的免费的私有互联网搜索引擎&#xff0c;用户不会被网站跟踪或被建立档案进行特征分析&#xff0c;良好地保障了用户的隐私。知识库可以有效地弥补大模型的知识欠缺问题&#xff0c;但依旧无法补充或弥补知识库和大…...

编程日记 2026/4/4 16:55:44

C# ConcurrentQueue 使用详解

总目录 前言 在C#多线程编程中&#xff0c;数据共享如同走钢丝——稍有不慎就会引发竞态条件&#xff08;Race Condition&#xff09;或死锁。传统Queue<T>在并发场景下需要手动加锁&#xff0c;而ConcurrentQueue<T>作为.NET Framework 4.0 引入的线程安全集合&a…...

编程日记 2026/2/25 20:02:10

armv7l

在 **ARMv7l** 中&#xff0c;最后的字符是字母 **“l”**&#xff08;小写字母 “L”&#xff09;&#xff0c;而不是数字 **“1”**。 --- ### 1. **ARMv7l 的含义** - **ARMv7**&#xff1a;指的是 **ARM 架构的第 7 代版本**&#xff0c;是一种广泛应用于嵌入式系统&…...

编程日记 2025/6/28 18:27:22

spring中关于Bean的复习（IOC和DI）

文章目录 1.spring程序开发步骤1.1 导入spring开发的基本包坐标1.2 编写Dao接口和实现类1.3 创建spring核心配置文件1.4 在spring配置文件中配置UserDaoImpl1.5 使用Spring的Api获得Bean实例 2. Bean实例化的三种方式2.1 无参构造方法实例化2.2 工厂静态方法实例化2.3 工厂实例…...

编程日记 2026/4/4 11:30:40

Docker内存芭蕾：优雅调整容器内存的极限艺术

title: “&#x1f4be; Docker内存芭蕾&#xff1a;优雅调整容器内存的极限艺术” author: “Cjs” date: “2025-2-23” emoji: “&#x1fa70;&#x1f4a5;&#x1f4ca;” 当你的容器变成内存吸血鬼时… &#x1f680; 完美内存编排示范 &#x1f4dc; 智能内存管家脚本…...

编程日记 2026/4/4 18:44:54

一周学会Flask3 Python Web开发-flask3上下文全局变量session,g和current_app

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili flask3提供了session,g和current_app上下文全局变量来方便我们操作访问数据。 以下是一个表格&#xff0c;用于比较Flask中的…...

编程日记 2026/4/5 3:45:13

【蓝桥杯单片机】客观题

一、第十三届省赛&#xff08;一&#xff09; 二、第十三届省赛&#xff08;二&#xff09;...

编程日记 2026/4/4 16:59:39

QT中经常出现的用法:组合

在 C 中&#xff0c;一个类包含另一个类的对象称为组合&#xff08; Composition &#xff09;。这是一种常见的设计模式&#xff0c;用 于表示一个类是由另一个类的对象组成的。这种关系通常表示一种 " 拥有 " &#xff08; "has-a" &#xff09;的关系。…...

编程日记 2026/4/4 16:58:22

下载CentOS 10

1. 进入官网&#xff1a;https://www.centos.org/ 2. 点击右上角的Download进入下载页面。 3. 选择对应的CPU架构&#xff0c;点击ISOs下面的Mirrors开始下载。...

编程日记 2026/4/5 16:37:43

第9章:LangChain让大模型结构化输出

文章详细介绍了LangChain4j中如何使用结构化输出&#xff08;Structured Outputs&#xff09;。主要内容包括&#xff1a; JSON Schema&#xff1a;通过指定JSON Schema&#xff0c;LLM可以生成符合结构的输出。工具&#xff08;Tools&#xff09;&#xff1a;通过工具调用实现…...

编程日记 2026/3/8 16:44:17

ES6 新特性，优势和用法？

ES6 新特性&#xff0c;优势和用法&#xff1f; ES6&#xff08;ECMAScript 2015&#xff09;引入了许多新特性&#xff0c;这些特性让 JavaScript 变得更加强大、简洁和易于使用。下面为你详细介绍一些常见的 ES6 新特性、它们的优势以及用法。 1. 块级作用域&#xff1a;le…...

编程日记 2026/3/21 14:34:29

简说spring 的设计模式

spring 的设计模式&#xff08;23种…) &#xff08;面试题&#xff09;说说BeanFactory和FactoryBean的实现原理和区别&#xff1f; spring 中你还知道哪些设计模式&#xff1f;&#xff1f; 1.简单工厂模式 实质&#xff1a; 由一个工厂类根据传入的参数&#xff0c;动态决…...

编程日记 2026/4/8 1:52:23

【 Avalonia UI 语言国际化 I18n】图文结合教学，保姆级教学，语言国际化就是这么简单(.Net C#)

完整项目地址 github : https://github.com/Crazy-GrowUp/AvaloniaI18nTest/tree/master gitee :https://gitee.com/jack_of_disco/avalonia-i18n-test 0.项目新建 Properties 文件夹 对应的项目配置文件里面就会增加 <Folder Include"Properties\" /> 1.项…...

编程日记 2026/4/8 2:34:56

Spring Boot 日志管理（官网文档解读）

摘要 本篇文章详细介绍了SpringBoot 日志管理相关的内容&#xff0c;文章主要参考官网文章的描述内容&#xff0c;并在其基础上进行一定的总结和拓展&#xff0c;以方便学习Spring Boot 的小伙伴能快速掌握Spring Boot 日志管理相关的内容。 日志实现方式 Sping Boot 的日志管…...

编程日记 2026/4/8 1:26:19