JavaScript中getElementById与querySelector区别

news2024/12/24 8:57:44

JavaScript中getElementById与querySelector区别

  • 1、getElement(s)Byxxxx 的用法
    • 1.1 getElementById() 方法
    • 1.2 getElementsByClassName() 方法
    • 1.3 getElementsByTagName() 方法
  • 2、querySelector() 和 querySelectorAll() 用法
    • 2.1 querySelector() 方法
    • 2.2 querySelectorAll() 方法
  • 3、区别

1、getElement(s)Byxxxx 的用法

1.1 getElementById() 方法

定义: 	getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
		如果没有指定 ID 的元素返回 null;
		如果存在多个指定 ID 的元素则返回第一个;
		如果需要查找到那些没有 ID 的元素,你可以考虑通过CSS选择器使用 querySelector();
语法:	document.getElementById(elementID);
参数值: String	必须。元素ID属性值。
返回值:  元素对象	指定ID的元素

1.2 getElementsByClassName() 方法

定义:	getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
		NodeList 对象代表一个有顺序的节点列表。NodeList 对象 可通过节点列表中的节点索引号来访问表中的节点(索引号由0开始)。
提示:  可使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取需要的那个元素。
语法: 	document.getElementsByClassName(classname)
参数: 	String	必须 需要获取的元素类名。  多个类名使用空格分隔,如 "test demo";
返回值:	NodeList 对象,表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。

1.3 getElementsByTagName() 方法

定义:   getElementsByTagName() 方法可返回带有指定标签名的对象的集合;
提示:   参数值 "*" 返回文档的所有元素;
语法:	document.getElementsByTagName(tagname)
参数:	String	必须  要获取元素的标签名;
返回值: NodeList 对象	指定标签名的元素集合

2、querySelector() 和 querySelectorAll() 用法

2.1 querySelector() 方法

定义:   querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素;
注意:   querySelector() 方法仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请用 querySelectorAll() 方法替代;
语法:   document.querySelector(CSS selectors);
参数值: String  必须。指定一个或多个匹配元素的 CSS 选择器。使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
        对于多个选择器,使用逗号隔开,返回一个匹配的元素。
返回值:  匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

2.2 querySelectorAll() 方法

定义:   querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象;
         NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始;
提示:    可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性,然后遍历所有元素,从而获取想要的信息;
语法:   elementList = document.querySelectorAll(selectors);
	     elementList 是一个静态的 NodeList 类型的对象;
         selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串;
参数值:  String  必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。
		 多个选择器使用逗号(,)分隔。
返回值:   一个 NodeList 对象,表示文档中匹配指定 CSS 选择器的所有元素。 
		 NodeList 是一个静态的 NodeList 类型的对象。如果指定的选择器不合法,则抛出一个 SYNTAX_ERR 异常。

3、区别

getElement(s)Byxxxx 获取的是动态集合,querySelector 获取的是静态集合

eg1: 将 for 循环条件修改为 i < 3,结果 在 ul 里新添加了3个元素,所有现在插入的 li 标签数量是6。

<body>
  <ul id="box">
    <li class="a">测试1</li>
    <li class="a">测试2</li>
    <li class="a">测试3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.getElementById('box');

  var list = ul.getElementsByTagName('li');
  for(var i = 0; i < 3; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length);
</script>

在这里插入图片描述
eg2: 下述代码静态集合体现在 .querySelectorAll(‘li’) 获取到 ul 里所有 li 后,不管后续再动态添加了多少 li,都是不会对其参数影响。

<body>
  <ul id="box">
    <li class="a">测试1</li>
    <li class="a">测试2</li>
    <li class="a">测试3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.querySelector('ul');

  var list = ul.querySelectorAll('li');
  for(var i = 0; i < list.length; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length); //输出的结果仍然是 3,不是此时 li 的数量 6
</script>

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

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

相关文章

Big O示例与Python数据结构的Big O

在Big-O示例部分的第一部分&#xff0c;我们将介绍各种Big-O函数的各种迭代。 让我们从一些简单的例子开始&#xff0c;探索大O是什么。 O(1) Constant def func_constant(values):Prints first item in a list of values.print(values[0])func_constant([1,2,3])# 1请注意&a…

避雷器计数器测试仪

原理 图1所示为JS动作记数器的原理接线图。图1&#xff08;a&#xff09;为JS动作记数器的基本结构&#xff0c;即所谓的双阀片式结构。当避雷器动作时&#xff0c;放电电流流过阀片R1&#xff0c;在R1上的压降经阀片R2给电容器C充电&#xff0c;然后C再对电磁式记数器的电感线…

easyX基本概念(注释版)

0.前言 本次我给您带来easyX库系列的博文&#xff0c;本系列博文目的在于对原easyX库文档进行一个补充和注解&#xff0c;重在补充测试样例和实践。 easyX库本身并不值得过于学习&#xff0c;但是作为有C语言基础的C爱好者&#xff0c;学习easyX能让您对IT技术更加感兴趣。用…

AI完成音频创作,击败99%作者

使用AI完成音频创作 &#xff0c;击败99%同类创作者 &#xff0c;享受持续广告变现收益 &#xff0c;下面我们来看下如何使用把~ 音频生成和投放可以分为以下两步骤&#xff1a; 使用AI效能公众号完成内容创作&#xff1b;利用喜马拉雅云剪辑发布内容 1. 内容生成 打开AI效能公…

Altium Designer 15 (AD15)新建元件库

1. 连接线 1.1 设置连接线的默认颜色&#xff0c;宽度&#xff1a;点击图标 --》按Tab键 1.2 默认使用蓝色&#xff0c;通用 2. 调出来元件库&#xff0c;然后按照元件的英文名字搜元件&#xff0c;拖到左边画图区域就可以了 3. 自己画一个元器件&#xff0c;自定义元器件 3.1…

6.14 消息队列

目录 消息队列 消息队列结构 消息队列使用步骤 消息队列创建/打开-msgget 消息队列创建/打开 - 示例 消息发送 – msgsnd 消息格式 消息发送 - 示例 笔记 消息队列 消息队列是System V IPC对象的一种 消息队列由消息队列ID来唯一标识 消息队列就是一个消息的列表。…

解决Idea中日志文件log4j.xml中http//jakarta.apache.org/log4j爆红,报错此 uri is not registered

在Idea中&#xff0c;配置log4j.xml出现“http //jakarta.apache.org/log4j/ uri is not registered”的错误信息&#xff0c;解决步骤如下&#xff1a; 1、原始的log4j.xml配置文件&#xff1a; <?xml version"1.0" encoding"GB2312" ?> <!…

ESP32(Micro Python)LVGL 四路ADC

本程序布局与上一个程序相同&#xff0c;引脚不重合&#xff0c;可以在不更换外设的情况下切换程序。由于仪表盘显示的数值范围不可调&#xff0c;实际显示的值为测量值占量程的百分比。 代码如下 import lvgl as lv import time from espidf import VSPI_HOST from ili9XX…

chatgpt赋能python:Python如何在输入之前等待30秒

Python如何在输入之前等待30秒 作为一名编程工程师&#xff0c;程序的性能和用户体验都是非常重要的。在用户输入数据之前等待一段时间可以帮助我们避免不必要的错误和提高程序的稳定性。本文将介绍如何使用Python等待30秒在输入数据。 使用Python的time模块 Python的time模…

【强烈推荐】 十多款2023年必备国内外王炸级AI工具 (免费 精品 好用) 让你秒变神一样的装逼佬感受10倍生产力 (4) AI办公

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&#x1…

SLAM实战项目(2) — ROS下运行ORB-SLAM2稠密地图重建

目录 1 运行步骤 (1) 创建工作空间 (2) 修改CmakeList.txt (3) 编译 (4) 下载bag文件 (4) 编写roslaunch文件 2 运行报错 报错1&#xff1a; 报错2&#xff1a; 报错3&#xff1a; 报错4&#xff1a; ROS学习文档&#xff1a;Introduction Autolabor-ROS机器人入门…

Bert模型精讲

1.Autoregressive语言模型与Autoencoder语言模型 1.1 语言模型概念介绍 Autoregressice语言模型&#xff1a;指的是依据前面(或后面)出现的单词来预测当前时刻的单词&#xff0c;代表有ElMo, GPT等。 Autoencoder语言模型&#xff1a;通过上下文信息来预测被mask的单词&…

Linux GCC,GDB,Shell脚本,Vim的简单使用

这里写目录标题 GCC命令GDB命令Shell脚本VIM指令 GCC命令 GCC&#xff08;GNU Compiler Collection&#xff0c;GNU编译器套件&#xff09;是由GNU开发的编程语言译器 编译一个简单的.c程序&#xff1a; 四步分开写&#xff1a; gcc -E -o hello.i hello.c // 预处理 gcc -…

chatgpt赋能python:Python怎么绕过登录爬取数据

Python怎么绕过登录爬取数据 在进行网站爬取时&#xff0c;经常会发现需要登录才能访问所需要的数据&#xff0c;这给我们的爬虫程序带来了一定的难度。本文就介绍一些Python绕过登录的方法&#xff0c;让你获取到所需的数据。 1. Session维持登录状态 当我们登录一个网站时…

运维实践 | 运维打工人必备 CentOS-Linux/Stream-8 服务器系统基础安装与配置实践...

欢迎关注「全栈工程师修炼指南」公众号 点击 &#x1f447; 下方卡片 即可关注我哟! 设为「星标⭐」每天带你 基础入门 到 进阶实践 再到 放弃学习&#xff01; 专注 企业运维实践、网络安全、系统运维、应用开发、物联网实战、全栈文章 等知识分享 “ 花开堪折直须折&#xf…

【LeetCode】python 主要元素 摩根投票法

目录 题目&#xff1a; 题解&#xff1a; 1.纯暴力&#xff08;字典&#xff09; 2. 摩根投票法 题目&#xff1a; 数组中占比超过一半的元素称之为主要元素。给你一个 整数 数组&#xff0c;找出其中的主要元素。若没有&#xff0c;返回 -1 。请设计时间复杂度为 O(N) 、空…

电脑中的个人私密视频该怎么加密?

因为电脑内存空间较大&#xff0c;所以很多人喜欢将拍摄的视频存放在电脑中&#xff0c;这其中就会有一些比较私密&#xff0c;不适合被其他人看到的视频。为了保护这些视频的安全&#xff0c;我们需要合适的方法对其进行加密保护。下面我们就一起来了解一下电脑中的个人私密视…

GAMES101笔记 Lecture 01

目录 Overview of Computer Graphics图形学的应用场景Video GamesMoviesAnimationsDesignVisualizationVirtual RealityDigital IllustrationSimulationGraphical User InterfacesTypography 为什么要学习计算机图形学&#xff1f;Fundamental Intellectual Challenges(图形学很…

Opencv-C++笔记 (5) : opencv-形态学

文章目录 1、形态学运算与结构2、腐蚀膨胀运算3、膨胀4、自定义结构元素5、开闭运算开运算闭运算 6、形态学梯度7、其他形态学-顶帽、黑帽、击中不击中8、核函数矩形核十字形核椭圆核 1、形态学运算与结构 形态学运算是针对二值图像依据数学形态学(Mathematical Morphology)的集…

Prefix-Tuning: Optimizing Continuous Prompts for Generation

《Prefix-Tuning: Optimizing Continuous Prompts for Generation》阅读笔记 论文题目&#xff1a;Prefix-Tuning: Optimizing Continuous Prompts for Generation论文链接&#xff1a;https://arxiv.org/pdf/2101.00190论文来源&#xff1a;Arxiv &#xff08;2021&#xff0…