javascript选择器大全

目录

1.getElementsByTagName

2.getElementsByName

3.getElementById

4.getElementsByClassName

5.querySelector

6.querySelectorAll


1.getElementsByTagName

俗称标签选择器,可以根据标签名查找匹配到页面的元素对象,返回为一个数组。

<div></div>
let elements = document.getElementsByTagName('div');

2.getElementsByName

俗称name选择器,可以根据name属性的值查找匹配到页面的元素对象,返回为一个数组。

<input type="text" name="username">
<input type="text" name="email">
let usernameInput = document.getElementsByName('username')[0];
let emailInput = document.getElementsByName('email')[0];

3.getElementById

俗称 id 选择器 , getElementById(id) 方法查找并返回一个与页面中 id 相匹配的元素对象。

<div id="myElement"></div>
let element = document.getElementById('myElement');

4.getElementsByClassName

俗称 class 选择器, 查找页面上所有类名为 class 的元素对象,返回为一个数组。(方法里面要查找的多个类名之间用空格分隔。)

<div class="myClass"></div>
let elements = document.getElementsByClassName('myClass');

5.querySelector

是元素选择器,可用于 id 和 class 选择,也就是上面 getElementById 和 getElementsByClassName 能做到的 querySelector 也能做到,并且 querySelector 还能用于其他复杂的元素选择场景,最后返回查找的元素。

<div class="myElement"></div>
let element = document.querySelector('.myElement');

6.querySelectorAll

querySelectorAll 选择器和 querySelector 选择器相似,只不过 querySelector 返回的是匹配的一个元素,querySelectorAll 返回的是匹配的多个元素,即数组类型。

<div class="myElements"></div>
<div class="myElements"></div>
let elements = document.querySelectorAll('.myElements');

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

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

相关文章

如何使用静态住宅ip代理进行Facebook群控?

在进行Facebook群控时&#xff0c;ip地址的管理是非常重要的&#xff0c;因为Facebook通常会检测ip地址的使用情况&#xff0c;如果发现有异常的使用行为&#xff0c;比如从同一个ip地址频繁进行登录、发布内容或者在短时间内进行大量的活动等等&#xff0c;就会视为垃圾邮件或…

springcloud-远程调用

微服务的远程调用 RestTemplate 在项目中&#xff0c;当我们需要远程调用一个 HTTP 接口时&#xff0c;我们经常会用到 RestTemplate 这个类。这个类是 Spring 框架提供的一个工具类。 实例化RestTemplate 创建配置类&#xff0c;实例化RestTemplate Configuration public clas…

【递归】:原理、应用与案例解析 ,助你深入理解递归核心思想

递归 1.基础简介 递归在计算机科学中&#xff0c;递归是一种解决计算问题的方法&#xff0c;其中解决方案取决于同一类问题的更小子集 例如 递归遍历环形链表 基本情况&#xff08;Base Case&#xff09;&#xff1a;基本情况是递归函数中最简单的情况&#xff0c;它们通常是递…

揭示端侧大语言模型的无限潜力:多种量化模型,可以在个人电脑或者手机上安装部署使用,几行代码进行调研可以离线使用

揭示端侧大语言模型的无限潜力:多种量化模型,可以在个人电脑或者手机上安装部署使用,几行代码进行调研可以离线使用。 MiniCPM 是面壁智能与清华大学自然语言处理实验室共同开源的系列端侧大模型,主体语言模型 MiniCPM-2B 仅有 24亿(2.4B)的非词嵌入参数量, 总计2.7B参数…

频段划分学习射频知识的意义

一、射频电路设计与低频电路设计的不同点 随着频率提高&#xff0c;相应电磁波的波长与变得可与分立电路元件的尺寸相比拟时&#xff0c;电阻、电容和电感这些元件的电响应&#xff0c;将偏离他们的理想频率特性。以 WIFI 2.4G 频段为例&#xff0c;当频率为 2437MHz&#xff0…

Ubuntu安装wireguard服务端,windows连接

需求&#xff1a;想要随时随地远程到ubuntu电脑的内网中&#xff0c;ping通所有的内网ip&#xff0c;方便通过内网ip进行远程 一、ubuntu上安装配置wireguard服务 1&#xff0c;更新软件包并安装wireguard服务端软件 sudo apt update sudo apt install wireguard 2&#xff0…

Flutter学习1 - Android开发者快速上手

1、对应关系 概念对应关系 AndroidFlutter页面Activity和FragmentWidget视图ViewWidget页面跳转IntentNavigater网络库okHttphttp数据存储SharedPreference和SQLiteshared_preferences和sqflite 布局对应关系 AndroidFlutter布局文件xmlWidget线性布局LinearLayoutRow和Col…

C# 字典(Dictionary)基本操作

一、定义一个字典&#xff1a; // 定义一个存储字符串键和整数值的字典 Dictionary<string, int> numbers new Dictionary<string, int>(); 二、添加元素&#xff1a; // 添加键值对 numbers.Add("One", 1); numbers.Add("Two", 2); 三、通…

在线图片生成工具:定制化占位图片的利器

title: 在线图片生成工具&#xff1a;定制化占位图片的利器 date: 2024/2/20 14:08:16 updated: 2024/2/20 14:08:16 tags: 占位图片网页布局样式展示性能测试响应式设计在线生成开发工具 在现代的网页设计和开发中&#xff0c;占位图片扮演着重要的角色。占位图片是指在开发过…

力扣日记2.20-【回溯算法篇】491. 非递减子序列

力扣日记&#xff1a;【回溯算法篇】491. 非递减子序列 日期&#xff1a;2023.2.20 参考&#xff1a;代码随想录、力扣 ps&#xff1a;放了个寒假&#xff0c;日记又搁置了三星期……&#xff08;下跪忏悔&#xff09; 491. 非递减子序列 题目描述 难度&#xff1a;中等 给你一…

奇门遁甲 API接口

接口数据api 接口平台&#xff1a;https://api.yuanfenju.com/ 开发文档&#xff1a;缘份居国学研究开发者API 支持格式&#xff1a;JSON 请求方式&#xff1a;HTTP POST <?php//您的密钥 $api_secret "wD******XhOUW******pvr"; //请求择日择时接口 $gate…

django rest framework 学习笔记2

注意&#xff1a;该文章部分摘抄之百度&#xff0c;仅当做学习笔记供小白使用&#xff0c;若侵权请联系删除&#xff01; 显示关联表的数据&#xff0c;本示例会显示所有的关联的数据信息 from rest_framework import serializers from .models import Student class StudentM…

各种手型都合适,功能高度可定制,雷柏VT9PRO mini和VT9PRO游戏鼠标上手

去年雷柏推出了一系列支持4KHz回报率的鼠标&#xff0c;有着非常敏捷的反应速度&#xff0c;在游戏中操作体验十分出色。尤其是这系列4K鼠标不仅型号丰富&#xff0c;而且对玩家的操作习惯、手型适应也很好&#xff0c;像是VT9系列就主打轻巧&#xff0c;还有专门针对小手用户的…

二维红外流程

x.1 开激光器 先将TDG&#xff0c;TCU&#xff0c;Empower打开&#xff0c;等一分钟后将TDG和Empower的钥匙打到On上&#xff1b; 按顺序先后开MaiTai&#xff1b;ACE&#xff1b;TOPAS&#xff1b;AOM&#xff1b; 测量ACE出光口处功率&#xff08;3.8w&#xff09;&#x…

MybatisPlus多表联查-分页关联查询+根据id获取多表联查后的单行数据

分页关联查询 需求分析 有两张表w以及d&#xff0c;需要w的一些字段以及d的一些字段在前端显示 此时就需要用到关联查询&#xff0c;查询到的数据放入视图类&#xff0c;显示在前端 项目结构 视图类 package com.wedu.modules.tain.entity.vo;import lombok.Data;import ja…

【算法】约瑟夫环问题解析与实现

一、导言 约瑟夫环&#xff08;Josephus Problem&#xff09;是一个经典的数学问题&#xff0c;涉及一个编号为 1 到 n 的人围成一圈&#xff0c;从第一个人开始报数&#xff0c;报到某个数字 m 的人出列&#xff0c;然后再从下一个人开始报数&#xff0c;如此循环&#xff0c…

挑战杯 基于RSSI的室内wifi定位系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; wifi室内定位系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;…

从零学算法300

300.给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 示例 1&…

2月20日,每日信息差

第一、中国联通 1 月智慧客服客户问题解决率为 97.9%&#xff0c;大联接用户达 10.02 亿户&#xff0c;5G 套餐用户约 2.64 亿户&#xff0c;物联网终端连接约 5.06 亿户。5G 行业虚拟专网服务客户数为 9185 个&#xff0c;智慧客服问题解决率 97.9%&#xff0c;智能服务占比 8…

仿照elementUI写个步骤条

效果图如下&#xff1a; 直接上代码&#xff1a; <template><div class""><div class"steps"><div class"step" v-for"(step, index) in steps" :key"index"><divclass"icon"click&…