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…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务，但是又不想花钱，所以就想着自己搭建一个，刚好我们用的一个开源框架已经集成了MinIO，所以就选了这个 我这边对文件服务性能要求不是太高，单机版就可以 安装非常简单，几个命令就…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
es6+和css3新增的特性有哪些
一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ，其中 inorder 是二叉树的中序遍历， postorder 是同一棵树的后序遍历，请你构造并返回这颗 二叉树 。 示例 1: 输入：inorder [9,3,15,20,7…...
数据库正常，但后端收不到数据原因及解决
从代码和日志来看，后端SQL查询确实返回了数据，但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离，并且ai辅助开发的时候，很容易出现前后端变量名不一致情况，还不报错，只是单…...
从实验室到产业：IndexTTS 在六大核心场景的落地实践
一、内容创作：重构数字内容生产范式 在短视频创作领域，IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色，生成的 “各位吴彦祖们大家好” 语音相似度达 97%，单条视频播放量突破百万…...
Linux入门课的思维导图
耗时两周，终于把慕课网上的Linux的基础入门课实操、总结完了！ 第一次以Blog的形式做学习记录，过程很有意思，但也很耗时。 课程时长5h，涉及到很多专有名词，要去逐个查找，以前接触过的概念因为时…...
深入理解 C++ 左值右值、std::move 与函数重载中的参数传递
在 C 编程中，左值和右值的概念以及std::move的使用，常常让开发者感到困惑。特别是在函数重载场景下，如何合理利用这些特性来优化代码性能、确保语义正确，更是一个值得深入探讨的话题。 在开始之前，先提出几个问题&…...