HTML通过类名查找HTML元素

假设页面中有很多性质一样的元素,如果通过ID获取这些元素的值非常麻烦,类名是一个不错的想法

看以下例子:

--------------------------------------------------





通过类名查找 HTML 元素

apple

orange

banana

当我想显示第1个水果时:

--------------------------------------------------

在这里,我希望能够自动显示出第1个水果,也就是

apple

这个元素中的值,我们可以给

apple

加一个ID

apple

,然后用以下Script语句获取元素:

var y = document.getElementById("apple");
document.getElementById("demo").innerHTML = y.innerHTML;

可是,当需求改变,需要展示其他第N个水果。就还需要再去给N加ID,。

类的做法是,先把他们都加个类名:

apple

  • OracleERP云软件二次开发:业务流程管理与自定义教程 kkchenjj 工业软件二次开发全集工业软件ERP数据库开发语言
    OracleERP云软件二次开发:业务流程管理与自定义教程OracleERP云平台概览OracleERP云平台架构OracleERPCloud采用了一种多层架构设计,旨在提供高度可扩展、安全且灵活的云解决方案。其架构主要分为以下几个层次:用户界面层:提供直观的用户界面,支持多种设备访问,包括桌面、平板和手机。这一层利用了现代Web技术,如HTML5、CSS3和JavaScript,确保了良好的用户
  • Vue3 实现 Excel 文件导入导出功能 海天胜景 exceljavascript
    在Vue3中实现Excel文件的导入和导出功能,你可以使用一些流行的JavaScript库,如SheetJS(也称为xlsx)来处理Excel文件。以下是实现这一功能的基本步骤:1.安装SheetJS首先,你需要安装xlsx库。在你的Vue项目中,可以通过npm或yarn来安装:npminstallxlsx#或者yarnaddxlsx2.导入和导出Excel文件导入Excel文件你可以使用一个文件
  • 决胜千里:三国 v2.0(Victory of Kilomiles Away:Three Kingdoms)免安装中文版 2501_91797003 开发语言java
    网盘链接:决胜千里:三国v2.0免安装中文版名称:决胜千里:三国v2.0(VictoryofKilomilesAway:ThreeKingdoms)免安装中文版描述:《决胜千里:三国》是一款融合战略与角色养成的史诗级三国题材游戏,玩家将亲历从黄巾之乱到三国鼎立的波澜壮阔历史!游戏独创"动态天命"系统,每位武将都有隐藏的"命格值"——关羽的义绝、曹操的奸雄等特质会在特定事件中触发历史名场面。从舌战群
  • 如何在Linux挂载ISO镜像文件 longerxin2020 Linuxlinux运维服务器
    在Linux系统中挂载ISO镜像文件,主要步骤如下‌:‌创建挂载目录‌:创建一个用于挂载ISO镜像文件的目录,例如/mnt/iso。‌挂载ISO镜像文件‌:使用mount命令挂载ISO镜像文件到创建的目录。命令:sudomount-oloop/path/to/iso/file.iso/mnt/iso‌查看挂载状态‌:使用df命令查看挂载点,确认ISO镜像文件是否成功挂载。df-h‌卸载ISO镜像文
  • 【深度强化学习】MIP-DQN 实现案例(完整Python代码)
    目录MIP-DQN算法概述建模基础训练阶段(Training)部署阶段(OnlineExecution)DNN网络转化为MIP表达式性能指标完整Python代码实现主函数:random_generator_battery模型函数:MIP_DQN基础/专用库包安装模型运行(完整Python代码)参数设置函数:Parameters参考本博客根据论文《Optimalenergysystemschedul
  • 2025年面试官常用的前端开发笔试考题 豆豆(前端开发+ui设计) vue.jsjavascript前端面试职场和发展
    填空题(20道)ReactHooks中,用于模拟类组件生命周期componentDidMount的Hook是________。useEffect在Vue3中,使用________API可以替代Vue2中的data和methods。CompositionWebpack的________插件可以帮助将CSS提取到单独的文件中。MiniCssExtractPlugin在JavaScript中,Promi
  • MTK Camera 架构概览:Imagiq ISP 关键模块解析与工程实战分享 观熵 影像技术全景图谱:架构调优与实战架构接口隔离原则影像Camera
    MTKCamera架构概览:ImagiqISP关键模块解析与工程实战分享关键词MTKCamera、ImagiqISP、联发科相机架构、AE/AWB/AF模块、3A控制、RAWDomain、SensorTuning、工程调试、影像信号处理摘要随着联发科平台在中高端手机市场逐步占据重要地位,其影像能力的竞争力也显著提升。ImagiqISP作为MTK平台核心影像处理模块,已支持多通道RAW输入、高速多帧
  • Github 2024-06-07开源项目日报 Top10
    根据GithubTrendings的统计,今日(2024-06-07统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下:开发语言项目数量Python项目3C++项目3JavaScript项目2JupyterNotebook项目1TypeScript项目1Vue项目1比特币核心:开源比特币软件创建周期:4919天开发语言:C++协议类型:MITLicenseStar数量:76760个F
  • 【Hadoop】onekey_install脚本 菜萝卜子 Linuxhadoop大数据分布式
    hosts[root@kafka01hadoop-script]#cat/etc/hosts127.0.0.1localhostlocalhost.localdomainlocalhost4localhost4.localdomain4::1localhostlocalhost.localdomainlocalhost6localhost6.localdomain6192.168.100.150k
  • 现代前端开发流程:CI/CD与自动化部署实战 天天进步2015 前端开发ci/cd自动化运维
    目录引言现代前端开发面临的挑战CI/CD基础概念前端CI/CD流程设计实战案例:构建前端CI/CD管道自动化部署策略监控与回滚机制最佳实践与优化建议总结引言随着前端技术的飞速发展,现代Web应用变得越来越复杂。前端项目不再只是简单的HTML、CSS和JavaScript文件的集合,而是演变成了包含众多依赖项、构建工具和框架的复杂系统。在这种情况下,持续集成和持续部署(CI/CD)流程成为了确保前端
  • JavaScript 异步编程的终极指南:从回调到 Promise、Async/Await
    JavaScript异步编程的终极指南:从回调到Promise、Async/Await你是否也曾被一个涉及多层网络请求的函数折磨得死去活来?代码像俄罗斯套娃一样层层嵌套,逻辑混乱不堪,bug隐藏在深渊之中。这种场景,就是每个JavaScript开发者都无法回避的课题:异步编程。由于JavaScript运行在单线程环境中,异步是其命脉所在。它允许程序在等待耗时操作(如API请求、文件读写)完成时,继
  • 从零开始学习 Redux:React Native 项目中的状态管理 wayne214 reactnative学习react.js
    Redux是一个用于JavaScript应用程序的状态管理库,通常与React或ReactNative配合使用,帮助管理应用的状态和数据流。其核心原理是通过集中式的“单一数据源”来管理应用状态,避免组件之间的“层层传递”状态和副作用。Redux的原理单一数据源(Store)Redux维护一个全局状态树(即Store),所有组件都通过读取这个状态树来获取数据。应用中的所有状态(数据)都存储在这个单一
  • JS补充18-dom中的查 常婧帅
    查查看元素节点document代表整个文档document.getElementById()元素id在ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素。document.getElementsByTagName()标签名。document.getElementsByName()需要注意只有部分标签name可生效(表单,表单元素,img,iframe)document.getE
  • 【vue-7】Vue3 响应式数据声明:深入理解 reactive() AllenBright #Vuevue.js前端javascript
    在Vue3中,响应式系统经过了彻底的重构,提供了更强大、更灵活的方式来声明和管理响应式数据。reactive()是Vue3组合式API中最核心的响应式函数之一。本文将深入探讨reactive()的工作原理、使用场景以及最佳实践。1.什么是reactive()?reactive()是Vue3提供的一个函数,它接收一个普通JavaScript对象,并返回该对象的响应式代理。这个代理对象与原始对象看起来
  • 微信小程序-礼物商城:完整开发项目教程 薛迟
    本文还有配套的精品资源,点击获取简介:微信小程序是腾讯公司推出的移动应用开发平台,适用于无需安装即可使用的在线服务。本项目分享的“微信小程序-礼物商城”源码为开发者提供了电商功能的实际参考,包括商品展示、搜索、购物车、订单管理、支付和用户评价等。源码覆盖了WXML、WXSS、JavaScript基础技术,数据存储、网络请求、页面路由、组件化开发、样式设计、调试与发布、授权与登录以及性能优化等微信小
  • 【web-攻击用户】(9.1.6)查找并利用XSS漏洞--基于DOM 黑色地带(崛起) 0X02【web渗透】web安全
    目录查找并利用基于DOM的XSS漏洞1.1、简介:1.2、过程:查找并利用基于DOM的XSS漏洞1.1、简介:1、提交一个特殊的字符串作为每个参数,然后监控响应中是否出现该字符串,无法确定基于DOM的XSS漏洞2、确定基于DOM的XSS漏洞的基本方法是,用浏览器手动浏览应用程序,并修改每一个URL参数,在其中插入一个标准测试字符串(如alert(1)和;alert(1)//等)3、通过在浏览器中显
  • xss的利用 m0_73832254 xss前端
    目录一、XSS的原理和分类二、常见的XSS标签和属性三、Xss漏洞分类1.反射性xss反射性XSS典型攻击场景基于URL参数的反射性XSS基于表单参数的反射性XSS利用HTML标签属性的反射性XSS2.存储型XSS存储型XSS的高频攻击场景社交平台评论区论坛发帖与私信系统电商平台商品描述3.基于DOM的XSS攻击原理剖析DOM型XSS典型攻击场景与案例基于URL参数的DOM型XSS基于localS
  • xss漏洞-反射+存储+DOM xiaoheizi安全 XSS漏洞合集web安全xss
    XSS跨站-反射型&存储型&DOM型等产生原理:服务器没有对用户提交的数据做过滤或者过滤不严谨,直接回显到了用户浏览器,浏览器对其进行了js解析并执行,导致了xss漏洞。攻击原理:攻击者利用网站程序对用户输入过滤不足,输入可以显示在页面上对其他用户造成影响的HTML代码,在用户端注入恶意的可执行脚本,若服务器对用户的输入不进行处理或处理不严,浏览器就会直接执行用户注入的脚本。利用:确认漏洞存在后可
  • 第二次总结(xss、js原型链)
    1XSS漏洞文章目录1XSS漏洞1.1XSS的原理1.2XSS漏洞分类1.1.1反射性xss特点常见场景1.1.2DOM型XSS**特点**常见场景1.1.3存储型XSS**特点**常见场景1.3XSS漏洞的黑盒测试1.4XSS漏洞的白盒测试2XSS练习2.1反射型Level1Level2总结2.2DOM型level1DOM型xss思路:2.3存储型level1存储型xss思路:2.4利用编码绕过
  • 缓存三剑客解决方案 爱学习的小熊猫_ 缓存redis
    缓存三剑客解决方案1.缓存雪崩定义:大量缓存数据在同一时间点集体失效,导致所有请求直接穿透到数据库,引发数据库瞬时高负载甚至崩溃。解决方案:设置过期随机值,避免大量缓存同时失效。//缓存雪崩防护:随机过期时间+双层缓存//设置随机过期时间(基础时间+随机偏移)Randomrandom=newRandom();longexpire=baseExpire+random.nextInt(5*60*100
  • Nodejs中process有哪些常用方法?
    在Node.js中,process是一个全局对象,提供了与当前Node.js进程互动的接口。它包含了一系列的方法和属性,可以帮助你获取系统信息,处理命令行参数,以及控制进程的行为等。以下是一些process对象的常用方法:process.argv:这不是一个方法,而是一个包含命令行参数的数组。第一个元素是’node’,第二个元素是正在执行的JavaScript文件的路径,接下来的元素则是任何其他命
  • python爬虫技术——基础知识、实战 南瓜AI python爬虫scrapy
    参考文献:Python爬虫入门(一)(适合初学者)-CSDN博客一、常用爬虫工具包Scrapy语言:Python特点:高效、灵活的爬虫框架,适合大型爬虫项目。BeautifulSoup语言:Python特点:用于解析HTML和XML,简单易用。Selenium语言:Python/Java/C#特点:支持浏览器自动化,适合处理JavaScript渲染的网页。Requests语言:Python特点:简
  • html5及css有什么区别,html5和css3的区别是什么? weixin_39788256 html5及css有什么区别
    html5和css3是什么?区别是什么?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。什么是HTML5?HTML,超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本,是当前最新版本,主要特点是支持原生的视频播放、离线存储、更多的语义
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言:版本兼容,一直是迭代开发头疼的事,最近新版本加上了支持新题型,如果新创建一份问卷包含了新题型,那旧版本客户端就不支持,如果新创建的问卷不包含新题型,那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候,该类已继承java.lang.Enum类,所以自定义枚举类无法继承别的类,但可以实现接口。
  • 【Scala十七】Scala核心十一:下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用,_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方,本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础:术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说,去访问某一个站点,若是该站点能够提供智能化的内容缓存来提高用户体验,那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储,是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念,具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容,并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一: 0481-079   Reached   a   symbol   that   is   not   expected.   背景: */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的,所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况,但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结(数学和三角函数) 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度,返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明: #使用JDK自带的JPS命令及grep命令组合,准确查找pid #jps 加 l 参数,表示显示java的完整包路径 #使用awk,分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory? package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员,那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理,我们头脑中闪出的两个概念,就是虚拟内存,与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级,一级是线性区,类似于00c73000-00c88000,对应于虚拟内存,它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一.进程和线程 进程就是一个在内存中独立运行的程序,有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”:指操作系统能同时运行多个进程(程序)。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程:是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法,把JSON Parse的性能提升到极致,是目前Java语言中最快的JSON库;包括“序列化”和“反序列化”两部分,它具备如下特征:     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架,但是Burlap已经几年不更新,所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时,不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧,主要是复制粘贴了Hessian与Spring集成一文,【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock 重复执行
    linux的crontab命令,可以定时执行操作,最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题,如果设定了任务每分钟执行一次,但有可能一分钟内任务并没有执行完成,这时系统会再执行任务。导致两个相同的任务在执行。 例如: <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字,不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1)top M:按内存使用排序 P:按CPU占用排序 1:显示各CPU的使用情况 k:kill进程 o:更多排序规则 回车:刷新数据 2)ulimit ulimit -a:显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟,中间要经过很多次的修正和改造       如果在这个过程中,外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6,将编译过程和遇到的问题作一简要记录,备查。 0. OpenJDK介绍 OpenJDK是Sun(现Oracle)公司发布的基于GPL许可的Java平台的实现。其优点: 1、它的核心代码与同时期Sun(-> Oracle)的产品版基本上是一样的,血统纯正,不用担心性能问题,也基本上没什么兼容性问题;(代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams({"tag" : encodeURI( document.getElementByIdx_x("filetag").value,"utf-8")}); 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的,在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单,通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1,可以跳过本章,直接从"入门篇"开始读起。 请注意,Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处:http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥,将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式,第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios,做android的真悲催! 有需求:需要手势滑动销毁一个Activity 怎么办尼?自己写? 不用~,网上先问一下百度。 结果: http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity,它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看:http://hovertree.com/texiao/js/2.htm代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求,但kafka暂时还没有提供rest api(应该是有在开发中,毕竟rest这么火),上网搜了一下,找到一个Confluent Platform,本文简单介绍一下安装。 这里插一句,给大家推荐一个九尾搜索,原名叫谷粉SOSO,不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了,出来之后用度娘搜技术问题,那匹配度简直感人。 环境声明:Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候,使用过Calendar.getInstance()来获取一个日期类的对象,这种方式跟单例的获取方式一样,那么它到底是不是单例呢,如果是单例的话,一个对象修改内容之后,另外一个线程中的数据不久乱套了吗?从试验以及源码中可以得出,Calendar不是单例。 测试: Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1, java多线程共享主内存中变量的时候,一共会经过几个阶段,    lock:将主内存中的变量锁定,为一个线程所独占。   unclock:将lock加的锁定解除,此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址:http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 : {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时,遇到: ERROR