HTML之JavaScript DOM编程获取元素的方式
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…...
如何安装vm和centos
以下是在VMware中安装CentOS的一般步骤： 一、安装VMware 以下是在 Windows 系统中安装 VMware 软件的详细步骤： 1. 下载 VMware 软件： - 访问 VMware 官方网站（https://www.vmware.com/）。 - 根据您的操作系统选择合…...
docker 安装redis 7.4.2并挂载配置文件以及设置密码
文章目录 docker 安装redis 7.4.2下载 redis如果你喜欢使用最新的版本创建挂载redis 配置文件创建容器 docker 安装redis 7.4.2 截至2025年2月21日，Redis的最新稳定版本是 7.4.2。 下载 redis 如果你想拉取Redis的特定版本（例如最新的稳定版本 7.4.2&a…...
计算机毕业设计SpringBoot+Vue.js在线教育系统(源码+文档+PPT+讲解)
温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...
Linux-C-函数栈-SP寄存器
sp（Stack Pointer，栈指针）是计算机体系结构中一个非常重要的寄存器，下面将详细介绍其作用和原理。 作用 1. 管理栈内存 栈是一种后进先出（LIFO，Last In First Out）的数据结构，在程…...
vi的基本使用
vi 是 Unix/Linux 系统中最常用的文本编辑器之一，功能强大但学习曲线较陡。以下是 vi 的基本使用方法： --- ### **1. vi 的两种模式** - **命令模式（Command Mode）**： - 默认进入的模式，用于执行命令&a…...
clickhouse--表引擎的使用
表引擎决定了如何存储表的数据。包括： 数据的存储方式和位置，写到哪里以及从哪里读取数据。(默认是在安装路径下的 data 路径)支持哪些查询以及如何支持。（有些语法只有在特定的引擎下才能用）并发数据访问。索引的使用࿰…...
LeetCode刷题零碎知识点整理
系列博客目录 文章目录 系列博客目录 数组变量有length属性，String类的对象有length()方法。String s; s.split("\\s");不能去除头部空格，需要使用s s.trim();String类的对象有toCharArray()方法，List<>类型有toArray()方法…...
GLTFLoader.js和OrbitControls.js两个 JavaScript 文件都是 Three.js 生态系统中的重要组成部分
GLTFLoader.js和OrbitControls.js两个 JavaScript 文件都是 Three.js 生态系统中的重要组成部分： 1. GLTFLoader.js 作用 GLTFLoader.js 是 Three.js 库中的一个辅助加载器脚本，其主要功能是加载 GLB 或 GLTF 格式的 3D 模型。GLTF（GL Tra…...
大厂数据仓库数仓建模面试题及参考答案
目录 什么是数据仓库，和数据库有什么区别？ 数据仓库的基本原理是什么？ 数据仓库架构是怎样的？ 数据仓库分层（层级划分），每层做什么？分层的好处是什么？数据分层是根据什么？数仓分层的原则与思路是什么？ 数仓建模常用模型有哪些？区别、优缺点是什么？星型模型和雪…...
angular简易计算器
说明： 用angular实现计算器效果，ui风格为暗黑 效果图： step1: C:\Users\Administrator\WebstormProjects\untitled4\src\app\calnum\calnum.component.ts import { Component } from angular/core;Component({selector: app-calnum,import…...
谈谈 ES 6.8 到 7.10 的功能变迁（3）- 查询方法篇
上一篇咱们了解了 ES 7.10 相较于 ES 6.8 新增的字段类型，这一篇我们继续了解新增的查询方法。 Interval 间隔查询： 功能介绍 Interval 查询，词项间距查询，可以根据匹配词项的顺序、间距和接近度对文档进行排名。主要解决的查询…...
16、Python面试题解析：python中的浅拷贝和深拷贝
在 Python 中，浅拷贝（Shallow Copy） 和 深拷贝（Deep Copy） 是处理对象复制的两种重要机制，它们的区别主要体现在对嵌套对象的处理方式上。以下是详细解析： 1. 浅拷贝（Shallow Copy&a…...
游戏引擎学习第119天
仓库:https://gitee.com/mrxiao_com/2d_game_3 上一集回顾和今天的议程 如果你们还记得昨天的进展，我们刚刚完成了优化工作，目标是让某个程序能够尽可能快速地运行。我觉得现在可以说它已经快速运行了。虽然可能还没有达到最快的速度，但我们…...
爬虫解析库：Beautiful Soup的详细使用
文章目录 1. 安装 Beautiful Soup2. 基本用法3. 选择元素4. 提取数据5. 遍历元素6. 修改元素7. 搜索元素8. 结合 requests 使用9. 示例：抓取并解析网页10. 注意事项 Beautiful Soup 是一个用于解析 HTML 和 XML 文档的 Python 库，它提供了简单易用的 API…...
OpenHarmony-4.基于dayu800 GPIO 实践（2）
基于dayu800 GPIO 进行开发 1.DAYU800开发板硬件接口 LicheePi 4A 板载 2x10pin 插针，其中有 16 个原生 IO，包括 6 个普通 IO，3 对串口，一个 SPI。TH1520 SOC 具有4个GPIO bank，每个bank最大有32个IO： …...
【C++设计模式】观察者模式（1/2）：从基础到优化实现
1. 引言 在 C 软件与设计系列课程中，观察者模式是一个重要的设计模式。本系列课程旨在深入探讨该模式的实现与优化。在之前的课程里，我们已对观察者模式有了初步认识，本次将在前两次课程的基础上，进一步深入研究，着重…...
《机器学习数学基础》补充资料：欧几里得空间的推广
在《机器学习数学基础》第 1 章介绍了向量空间，并且说明了机器学习问题通常是在欧几里得空间。然而，随着机器学习技术的发展，特别是 AI 技术开始应用于科学研究中，必然会涉及到其他类型的空间。本文即在《机器学习数学基础》一书所…...
在配置PX4中出现的问题2
想要原教程的请看：第一次配置中出现的问题 前面一切正常（gazebo导入models那一步在刚刚解压好的文件夹里就删不掉stereo_camera等文件，ls打开也看不到，应该时我下的包里面本来就没有），到 make px4_sitl_def…...
2025-2-24-4.9 单调栈与单调队列（基础题）
文章目录 4.9 单调栈与单调队列（基础题）单调栈739. 每日温度42. 接雨水单调队列239. 滑动窗口最大值 4.9 单调栈与单调队列（基础题） 很有趣的两个数据结构。 原视频讲解链接 单调栈 739. 每日温度 题目链接 给定一个整数数组 te…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
MySQL：分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...