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

JavaScript的学习之DOM的查询（一）

news 2026/2/9 22:12:38

一、获得元素

通过document对象调用：

  1. getElementById()：通过id属性获取一个元素节点对象
  2. getElementsByTagName()：通过标签名获取一组元素节点对象
  3. getElementsByName()：通过name属性来获取一组元素节点对象

 核心学习代码

		<script>//完成下面的按钮的功能window.onload = function() {var btn01 = document.getElementById('btn01');// 为id为btn01的按钮绑定一个单击响应函数btn01.onclick = function() {// 查找#bj节点var bj = document.getElementById('bj');alert(bj.innerHTML);};// 查找所有li节点var btn02 = document.getElementById('btn02');btn02.onclick = function(){var lis = document.getElementsByTagName('li');// getElementsByTagName获得的是一组元素节点对象for(var i = 0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 查找name=gender的所有节点var btn03 = document.getElementById('btn03');btn03.onclick = function(){var inputs = document.getElementsByName('gender');for (var i=0;i<inputs.length;i++){// 对于自结标签可以直接通过标签名来获取// 对于class属性不能直接.class，只能通过className方式alert(inputs[i].value);}}// 查找#city下所有li节点// 返回#city所有子节点// 返回#phone的第一个子节点// 返回#bj的父节点// 返回#android的前一个兄弟节点// 返回#username的value属性值// 设置#username的value属性值// 返回#bj的文本值}</script>

代码示例

<!doctype html>
<html><head><meta charset="utf-8"><title></title><script>//完成下面的按钮的功能window.onload = function() {var btn01 = document.getElementById('btn01');// 为id为btn01的按钮绑定一个单击响应函数btn01.onclick = function() {// 查找#bj节点var bj = document.getElementById('bj');alert(bj.innerHTML);};// 查找所有li节点var btn02 = document.getElementById('btn02');btn02.onclick = function(){var lis = document.getElementsByTagName('li');// getElementsByTagName获得的是一组元素节点对象for(var i = 0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 查找name=gender的所有节点var btn03 = document.getElementById('btn03');btn03.onclick = function(){var inputs = document.getElementsByName('gender');for (var i=0;i<inputs.length;i++){// 对于自结标签可以直接通过标签名来获取// 对于class属性不能直接.class，只能通过className方式alert(inputs[i].value);}}// 查找#city下所有li节点// 返回#city所有子节点// 返回#phone的第一个子节点// 返回#bj的父节点// 返回#android的前一个兄弟节点// 返回#username的value属性值// 设置#username的value属性值// 返回#bj的文本值}</script></head><body><div class="total"><div class="inner"><p>你喜欢哪一个城市？</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br /><br /><p>你最喜欢的单机游戏？</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统？</p><ul id="phone"><li id="phone">IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">genner:<input type="radio" name="gender" value="male" />Male:<input type="radio" name="gender" value="female" />Female:<br /><br />name:<input type="text" name="name" value="abcd" /></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></html>

 效果图

 对于DOM的查询内容知识点比较多，分成几个部分学习，这节学习主要掌握三个知识点。

上节学习链接：

JavaScript的学习之文档的加载

相关文章：

JavaScript的学习之DOM的查询（一）

一、获得元素 通过document对象调用&#xff1a; getElementById()&#xff1a;通过id属性获取一个元素节点对象getElementsByTagName()&#xff1a;通过标签名获取一组元素节点对象getElementsByName()&#xff1a;通过name属性来获取一组元素节点对象 核心学习代码 <scrip…...

编程日记 2024/7/1 14:10:15

充电宝哪个品牌比较好一点？多维度实测西圣、绿联、倍思充电宝！

在这个快节奏的时代&#xff0c;智能手机已成为我们日常生活不可或缺的一部分&#xff0c;而充电宝作为其能量补给站&#xff0c;重要性不言而喻。面对市场上琳琅满目的充电宝品牌与型号&#xff0c;如何挑选一款既实用又高效的充电伴侣&#xff0c;成为了许多消费者的难题。今…...

编程日记 2024/7/1 14:09:13

ubuntu安装QT

以QT5.15.14为例 下载地址&#xff1a;Index of /archive/qt 安装步骤&#xff1a; 解压qt-everywhere-src-5.15.14运行&#xff1a; cd qt-everywhere-src-5.15.14 mkdir build cd build ../configure -prefix /opt/qt5.15.14 -opensource -confirm-license make -j16 sudo…...

编程日记 2024/7/1 14:08:12

DataGrip 2024 po for Mac 数据库管理工具解

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…...

编程日记 2024/7/1 14:07:11

《C++ Primer》导学系列：第 13 章 - 拷贝控制

13.1 拷贝、赋值与析构函数 拷贝控制是C++中类设计的重要组成部分，用于管理对象的复制、赋值和销毁过程。理解并正确实现拷贝控制函数（拷贝构造函数、拷贝赋值运算符和析构函数）对于编写健壮和高效的C++程序至关重要。 13.1.1 拷贝构造函数 拷贝构造函数用于创建对象的副…...

编程日记 2024/7/1 14:06:09

c++ 图论2 深度优先算法和广度优先算法

修改一下深度优先算法和广度优先算法&#xff0c;标出每一个节点相对于遍历起始位置的层级&#xff0c;遍历起始起点为第一层&#xff0c;和第一层相连的节点为第二层&#xff0c;以此类推 定义一个新的结构 struct NodeWithLevel {TreeNode* node;int level;NodeWithLevel(T…...

编程日记 2024/7/1 14:05:08

【Qt】初识QtQt Creator

一.简述Qt 1.什么是Qt Qt 是⼀个 跨平台的 C 图形⽤⼾界⾯应⽤程序框架 。它为应⽤程序开发者提供了建⽴艺术级图形界⾯所需的所有功能。它是完全⾯向对象的&#xff0c;很容易扩展。Qt 为开发者提供了⼀种基于组件的开发模式&#xff0c;开发者可以通过简单的拖拽和组合来实现…...

编程日记 2024/7/1 14:02:05

Android 11.0 修改系统显示大小导航栏消失

Android 11.0 修改系统显示大小导航栏消失 1.显示大小设置为大时&#xff0c;导航栏图标不显示。 设置为大&#xff0c;较大&#xff0c;最大时&#xff0c;导航栏图标不显示。 2.开始怀疑是导航栏被隐藏了&#xff0c;各种折腾无效。 3.发现&#xff1a; frameworks/base/pa…...

编程日记 2024/7/1 14:00:03

RocketMQ源码学习笔记：Producer启动流程

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview1.1、创建MQClientInstance1.1.1、检查1.1.1、MQClientInstance的ID 1.2、MQClientInstance.start() 1、Overview 这是发送信息的代码样例&#xff0c; DefaultMQProducer produ…...

编程日记 2024/7/1 13:59:02

Node.js 和浏览器环境中都使用 WebSocket

使用WebSocket为什么不适配双端 浏览器环境本身就支持 WebSocket&#xff0c;直接使用 JavaScript 内置的 WebSocket 对象来建立连接。 Node中本身并没有内置 WebSocket 协议的支持&#xff0c;所以需要使用第三方库 ws来实现 WebSocket 功能。 一. 使用跨平台 WebSocket 库 …...

编程日记 2024/7/1 13:58:00

css美化滚动条样式

效果展示 实现 滚动条宽&#xff0c;高度 /* 整体滚动条 */ ::-webkit-scrollbar {width: 10px; }/* 滚动条轨道 */ ::-webkit-scrollbar-track {background-color: #ffffff;border-radius: 6px; }/* 滚动条滑块 */ ::-webkit-scrollbar-thumb {background-color: #888;borde…...

编程日记 2024/7/1 13:55:58

由浅入深，走进深度学习（补充篇：转置卷积和FCN）

本期内容是针对神经网络层结构的一个补充&#xff0c;主要内容是&#xff1a;转置卷积和全连接卷积网络 相关内容&#xff1a; 由浅入深&#xff0c;走进深度学习&#xff08;2&#xff09;_卷积层-CSDN博客 由浅入深&#xff0c;走进深度学习&#xff08;补充篇&#xff1a…...

编程日记 2024/7/1 13:54:57

Linux基础篇——目录结构

基本介绍 Linux的文件系统是采用级层式的树状目录结构&#xff0c;在此结构中的最上层是根目录"/"&#xff0c;然后在根目录下再创建其他的目录 在Linux中&#xff0c;有一句经典的话&#xff1a;在Linux世界里&#xff0c;一切皆文件 Linux中根目录下的目录 具体的…...

编程日记 2024/7/1 13:53:55

星际编码：Swifter.Json，.NET宇宙中的数据处理新星

概述 在数字化的星辰大海中&#xff0c;数据是宇宙的通用语言。在.NET这一广袤的星系中&#xff0c;JSON作为信息交换的媒介&#xff0c;扮演着至关重要的角色。今天&#xff0c;我们要探索的是一颗新星——Swifter.Json&#xff0c;一个功能全面且性能卓越的JSON序列化和反序列…...

编程日记 2024/7/1 13:52:54

python 压缩数据

requests 是 Python 中一个非常流行的 HTTP 库&#xff0c;用于发送各种 HTTP 请求。下面是一个使用 requests 库发送简单 GET 请求和 POST 请求的示例&#xff1a; 首先&#xff0c;确保你已经安装了 requests 库。如果还没有安装&#xff0c;可以使用 pip 进行安装&#xff…...

编程日记 2024/7/1 13:51:53

nacos在k8s上的集群安装实践

目录 概述实践nfs安装使用 k8s持久化nacos安装创建角色部署数据库执行数据库初始化语句部署nacos ingress效果展示问题修复 结束 概述 本文主要对 nacos 在k8s上的集群安装 进行说明与实践。主要版本信息&#xff0c;k8s: 1.27.x&#xff0c;nacos: 2.0.3。运行环境为 centos 7…...

编程日记 2024/7/1 13:50:52

数据结构—判断题

1.数据的逻辑结构说明数据元素之间的顺序关系&#xff0c;它依赖于计算机的存储结构。 答案&#xff1a;错误 2.(neuDS)在顺序表中逻辑上相邻的元素&#xff0c;其对应的物理位置也是相邻的。 答案&#xff1a;正确 3.若一个栈的输入序列为{1, 2, 3, 4, 5}&#xff0c;则不…...

编程日记 2024/7/1 13:49:50

树莓派挂载的移动硬盘badblocks坏道屏蔽，以这个为准

!!!use 这里要设置块大小和磁盘相同 badblocks -b 4096 -s -c 512 -v -o /a/2/bads4.txt /dev/sda5 检测完重新检测跳过之前的记录 badblocks -i /a/2/bads4.txt -b 4096 -s -c 512 -v -o /a/2/bads5.txt /dev/sda5 可以查看磁盘具体block总数和大小 sudo dumpe2fs /dev/sda5 …...

编程日记 2024/7/1 13:41:44

Unity开箱即用的UGUI面板的拖拽移动功能

文章目录 &#x1f449;一、背景&#x1f449;二、效果图&#x1f449;三、原理&#x1f449;四、核心代码&#x1f449;五&#xff0c;总结 &#x1f449;一、背景 之前做PC项目时常常有面板拖拽移动的需求&#xff0c;今天总结封装一下&#xff0c;做成一个随时随地可复用的…...

编程日记 2024/7/1 13:40:42

春秋云境：CVE-2022-25411[漏洞复现]

根据题目提示和CNNVD优先寻找后台管理地址 靶机启动后&#xff0c;使用AWVS进行扫描查看网站结构 在这里可以看到后台管理的登录地址&#xff1a;/admin/&#xff0c;根据题目提示可知是弱口令 尝试admin、123456、admin666、admin123、admin888...等等常见弱口令 正确的账户…...

编程日记 2024/7/1 13:35:38

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25