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…...
终极指南：如何用Web Scraper Chrome扩展零代码抓取网页数据
终极指南：如何用Web Scraper Chrome扩展零代码抓取网页数据 【免费下载链接】web-scraper-chrome-extension Web data extraction tool implemented as chrome extension 项目地址: https://gitcode.com/gh_mirrors/we/web-scraper-chrome-extension 还在为手…...
如何用猫抓浏览器扩展实现流媒体资源嗅探：从M3U8解析到批量下载的完整指南
如何用猫抓浏览器扩展实现流媒体资源嗅探：从M3U8解析到批量下载的完整指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在当今流媒体…...
从缺页异常到内存陷阱：一个mincore函数如何帮你检测手游里的透视自瞄挂
从缺页异常到内存陷阱：mincore函数在手游反外挂中的实战解析 手游安全攻防战从未停歇，尤其是FPS和MOBA类游戏中透视与自瞄外挂的泛滥，让开发者们不断寻找更底层的检测方案。当传统的内存校验和API监控难以应对内核级外挂时，Linux内…...
SliderCaptcha终极指南：5分钟构建Web安全验证解决方案
SliderCaptcha终极指南：5分钟构建Web安全验证解决方案 【免费下载链接】SliderCaptcha 项目地址: https://gitcode.com/gh_mirrors/sl/SliderCaptcha 在当今Web应用面临日益严峻的自动化攻击威胁的背景下，SliderCaptcha滑块验证码成为保护网站安…...
3个步骤让你在电脑上畅玩Switch游戏：Ryujinx模拟器完全指南
3个步骤让你在电脑上畅玩Switch游戏：Ryujinx模拟器完全指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 你是否曾经想过，如果能在自己的电脑上体验《塞尔达传…...
告别时间不准！用Arduino Nano和DS3231模块DIY一个高精度数字时钟（附完整代码）
用Arduino Nano和DS3231打造高精度数字时钟的完整指南 你是否厌倦了手机和电脑上那些时不时需要手动校准的时间显示？市面上大多数电子时钟要么走时不准，要么功能单一。今天，我们将用Arduino Nano和DS3231实时时钟模块，打造一个走时…...
Rust 编译器优化参数详解
Rust编译器优化参数详解 Rust作为一门注重性能与安全的系统编程语言，其编译器在代码优化方面提供了丰富的参数选项。合理使用这些优化参数可以显著提升程序的运行效率，减少资源消耗。本文将详细介绍Rust编译器的优化参数，帮助开发者更好地利…...
【2026科研生存指南】：错过SITS2026这组AGI协同实验数据，你将落后至少18个月迭代周期
第一章：SITS2026案例：AGI辅助科学研究 2026奇点智能技术大会(https://ml-summit.org) AGI驱动的跨模态科研工作流 在SITS2026发布的SITS-Science Agent v3.2中，通用人工智能系统首次实现对高能物理实验全流程的自主协同干预。该系统整合了粒…...
硬件工程师薪资的真实决定因素
在技术岗位中，硬件工程师一直是一个颇具争议的群体： 责任极高、知识极广、周期极长，但薪资与话语权却常常不匹配。 很多人将原因简单归结为“行业不景气”或“公司不重视”，但如果从工程体系、组织结构与商业逻辑三个维度深入分析，会发现——硬件工程师的薪资，并非单一因…...
如何3分钟安装B站评论智能标注工具：开源社区互动助手完整指南
如何3分钟安装B站评论智能标注工具：开源社区互动助手完整指南 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分，支持动态和关注识别以及手动输入 UID 识别 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checker …...