【JS】querySelectorAll和getElementsByClassName

现有一段代码,li的类名均为item,有一按钮可动态添加类名为item的li。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li></ul><button>+1</button><script>var num = document.getElementsByClassName('item');console.log(num);var btn = document.getElementsByTagName('button')[0];btn.onclick = () => {const ulElement = document.querySelector('ul');const liElement = document.createElement('li');liElement.className = 'item';ulElement.appendChild(liElement);console.log(num);}</script>
</body></html>

页面初始化打印:

在这里插入图片描述
点击按钮后:

在这里插入图片描述

可以发现通过getElementsByClassName获取的元素集合是动态的,这在某些需要循环的场景下会导致死循环

但是通过querySelectorAll获取的元素是静态的。

var num = document.querySelectorAll('.item');

页面初始化打印:

在这里插入图片描述
点击按钮后:

在这里插入图片描述

总结

二者均可获取dom元素集合,返回类数组对象,但querySelectorAll返回的是一个静态NodeList 对象,getElementsByClassName返回的是一个动态HTMLCollection 对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++从练气到飞升】07---内存管理

&#x1f388;个人主页&#xff1a;库库的里昂 ✨收录专栏&#xff1a;C从练气到飞升 &#x1f389;鸟欲高飞先振翅&#xff0c;人求上进先读书。 目录 一、 C/C内存分布 二、 C语言中动态内存管理方式 三、 C中动态内存管理 1. new/delete操作内置类型 2. new和delete操作…

前端二维码工具小程序:营销裂变的好助手

一、摘要 在数字化营销日益盛行的今天&#xff0c;如何以新颖、高效的方式吸引用户&#xff0c;成为了每一个营销者所追求的目标。前端二维码工具小程序&#xff0c;作为一款集二维码生成、AI助手与绘图画画功能于一体的综合性工具&#xff0c;不仅为营销人员提供了全新的思路…

0101tomcat部署war访问mysql失败-容器间通信-docker项目部署

文章目录 一、简介二、部署1、mysql数据迁移2、docker部署redis3、docker部署tomcat并运行war包 三、报错四、解决1 分析2 解决 结语 一、简介 最近参与开发一个项目&#xff0c;其中一部分系统需要迁移。从阿里云迁移到实体服务器&#xff0c;使用docker部署。系统使用Java语…

openssl密钥证书管理(Key and Certificate Management)

前言 前两日应别人要求提供一份CSR文件过去&#xff0c;方便他们生成相关证书&#xff0c;对于这一块本来也不熟&#xff0c;于是找到openssl官网&#xff0c;想找找相关的教程看看&#xff0c;一番小找&#xff0c;果有收获&#xff0c;是个宝藏&#xff0c;源文档在这…

Mysql-模糊匹配度排序分页

Mysql-模糊匹配度排序分页 抛出问题 在使用模糊匹配分页的时候想根据匹配度高进行排序应该如何实现呢&#xff1f; 上面是添加的模拟数据&#xff0c;根据匹配度高的情况下张三的优先级肯定是最高的&#xff0c;首先直接使用模糊搜索分页看看效果吧。 很明显的可以看到&#…

【解决】Spring Boot创建项目常见问题

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 idea无maven选项 无效发行版17 类⽂件具有错误的版本 61.0, 应为 …

海外云手机为什么适合社媒运营?

如今&#xff0c;社媒营销如果做得好&#xff0c;引流效果好的账号&#xff0c;可以用来带货变现&#xff0c;而外贸、品牌出海也同样都在做社媒营销&#xff0c;Tik Tok、facebook、ins等热门的海外社媒平台都是行业密切关注的&#xff0c;必要的时候&#xff0c;大家会使用海…

「51媒体」权重高新闻源央级媒体邀约资料有哪些?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 权重高的央级媒体邀约资源包括了中国一些最具影响力和权威性的新闻机构。具体如下&#xff1a; 人民日报&#xff1a;作为中国共产党中央委员会的机关报&#xff0c;人民日报具有极高的权…

硬件测试学习——电源纹波测试(2024.04.15)

参考链接1: 测试开关电源的纹波 在此感谢各位前辈大佬的总结&#xff0c;写这个只是为了记录学习大佬资料的过程&#xff0c;内容基本都是搬运的大佬博客&#xff0c;觉着有用自己搞过来自己记一下&#xff0c;如果有大佬觉着我搬过来不好&#xff0c;联系我删。 硬件测试学习—…

腾讯EdgeOne产品测评体验—Web安全的攻与防:云端防护一体化

目录 简介接入准备EdgeOne购买及接入服务器环境配置添加测试站点关闭防护 安全性能测试XSS攻击sql注入 站点加速测试代码测试通过在线工具对比测试Ping检测tcping网站测速 HTTPS证书 操作步骤优点 总结EdgeOne的优缺点 简介 EdgeOne&#xff0c;作为腾讯云推出的全新CDN解决方…

Linux之 USB驱动框架-usb-skeleton.c usb驱动源码分析(3)

一、usb 驱动框架图 二、 usb 设备经典驱动&#xff1a;usb-skeleton.c 驱动 路径&#xff1a; drivers/usb/usb-skeleton.c USB骨架程序可以看做一个最简单的USB设备驱动的实例&#xff0c;其分析流程大致如下&#xff1a; static struct usb_driver skel_driver { …

揭示边缘计算网关的市场价格趋势(购买指南)-天拓四方

在数字化转型的大潮中&#xff0c;边缘计算网关作为连接云端与终端设备的核心节点&#xff0c;其重要性日益凸显。然而&#xff0c;面对市场上琳琅满目的边缘计算网关产品&#xff0c;对于许多企业和个人用户来说&#xff0c;边缘计算网关的价格成为选择产品时的重要考量因素。…

KT-105小动物人工呼吸机

咳咳&#xff0c;请各位小伙伴们注意啦&#xff01;我们要聊的主题可是相当高大上——小动物呼吸机&#xff01; 我们得先了解一下什么是小动物呼吸机。这可不是一般的机器哦&#xff0c;它是一种实验设备&#xff0c;主要用于各种各样的科学研究实验中。比如&#xff0c;在基…

【C++类和对象】类和对象的引入

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

mysql查找binlog的删除记录时间

需求&#xff1a;数据库某表的数据没有了&#xff1b;如何找是什么时修改清掉的&#xff1b; 思路&#xff1a; 1. 查代码&#xff0c;找某表的删除接口&#xff0c;分析是在哪里调用&#xff1b;【部分服务log不全】 2. 查服务的log&#xff1b;【部分服务log不全】 3. 查…

【学习笔记十七】波次管理、自动波次和WOCR介绍及配置

一、手工维护波次 波次是控制仓库活动(如拣配)的仓库请求项目(通常是出库交货订单项目)的分组。这些分组随后在后续流程中一起处理,例如,将分配到波次的所有仓库请求项目传输到仓库任务创建。 注意:仓库请求是出库交货订单、过账更改、库存转储(用于仓库中的内部移动)或入库…

38条Web测试经验分享

1. 页面链接检查 每一个链接是否都有对应的页面&#xff0c;并且页面之间切换正确。可以使用一些工具&#xff0c;如LinkBotPro、File-AIDCS、HTML Link Validater、Xenu等工具。 LinkBotPro不支持中文&#xff0c;中文字符显示为乱码&#xff1b;HTML Link Validater只能测试…

VSCode+Cmake 调试时向目标传递参数

我有一个遍历文件层次结构的程序&#xff0c;程序根据传入的文件路径&#xff0c;对该路径下的所有文件进行遍历。这个程序生成一个名为 ftw 的可执行文件&#xff0c;如果我要遍历 /bin 目录&#xff0c;用法为&#xff1a; ftw /bin问题是&#xff0c;如果我想单步跟踪&…

HBase2.x学习笔记

文章目录 一、HBase 简介1、HBase 定义1.1 概述1.2 HBase 与 Hadoop 的关系1.3 RDBMS 与 HBase 的对比1.4 HBase 特征简要 2、HBase 数据模型2.1 HBase 逻辑结构2.2 HBase 物理存储结构2.3 HBase的表数据模型 3、HBase 基本架构3.1 Master3.2 Region Server3.3 Zookeeper3.4 HD…

每日一练 | 华为认证真题练习Day215

1、下面是一段MUX VLAN中,关于主VLAN和从VLAN的配置,关于此配置说法正确是(多选) A. VLAN 10为主机VLAN B. VLAN 11为主机VLAN C. VLAN12为隔离型从VLAN D. VLAN 11和VLAN 12都为从VLAN E. VLAN 10和VLAN 11都为MUX VLAN 2、BGP邻居建立过程的状态存在以下几种,那么建立一个…