document.querySelector 有多个类

document.querySelector 方法用于返回文档中匹配指定 CSS 选择器的第一个元素。如果要查询具有多个类的元素,可以将它们作为一个字符串传递给 querySelector,并使用 . 符号将它们隔开。

例如,如果你想要选择拥有 class1 和 class2 类的元素,你可以这样做:

 
var element = document.querySelector('.class1.class2');

这里,.class1.class2 是 CSS 选择器,它会选择所有同时拥有 class1 和 class2 类的元素。注意,在这里没有空格,因为 . 是用来分隔类名的。

如果你想要选择拥有任何一个指定类的元素,可以使用 , 符号分隔类名:

 
var element = document.querySelector('.class1, .class2');

这将返回文档中具有 class1 或 class2 类的第一个元素。如果你想要选择拥有所有指定类的元素,但类名的顺序并不重要,你可以使用 querySelectorAll 方法:

 
var elements = document.querySelectorAll('.class1.class2');

这将返回文档中同时拥有 class1 和 class2 类的所有元素。

document.querySelector 有多个类 的情况的更多相关文章

  1. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  2. 正确地缩写 document.querySelector

    北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...

  3. 实现兼容document.querySelector的方法

    var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展: var element = null; if(document.queryS ...

  4. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  5. 2013 Visual Studio Magazine读者选择奖界面框架类获奖情况

    2013 Visual Studio Magazine读者选择奖已经正式揭晓了!据了解,截至今年此奖项已经评选了21次,非常值得.NET开发人员信赖和参考.此次评选共有400多个产品角逐28个分类的奖 ...

  6. document.querySelector获取不到html标签对象实例的原因

    官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...

  7. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  8. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  9. document.querySelector()与document.querySelectorAll()

      document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...

  10. JAVA之中出现无法加载主类的情况解决方法

    j今天打代码的时候出现了无法加载主类的情况,我就收集了一些,java无法加载主类的方法 ava无法加载主类解决办法 今天启动项目,又遇到找不到或无法加载主类的情况,清除项目后无法编译,class文件下 ...

随机推荐

  1. Spark Web UI 监控详解

    Spark集群环境配置 我们有2个节点,每个节点是一个worker,每个worker上启动一个Executor,其中Driver也跑在master上.每个Executor可使用的核数为2,可用的内存为 ...

  2. 强化学习:如何计算被环境系统截断的terminated state的value值 —— (Bootstrap returns from value estimates if episode is terminated by timeout)

    本文主题:如何计算强化学习中被环境系统截断的terminated state的value值 首先解释一下什么是强化学习中的terminated state的value值,强化学习就是一个智能体(age ...

  3. 一款 C# 编写的神经网络计算图框架

    前言 深度学习技术的不断发展,神经网络在各个领域得到了广泛应用.为了满足 .NET 开发的需求,推荐一款使用 C# 编写的神经网络计算图框架. 框架的使用方法接近 PyTorch,提供了丰富的示例和详 ...

  4. 15.Kubernetes持久化存储

    Kubernetes持久化存储 前言 之前我们有提到数据卷:emptydir ,是本地存储,pod重启,数据就不存在了,需要对数据持久化存储 对于数据持久化存储[pod重启,数据还存在],有两种方式 ...

  5. 痞子衡嵌入式:我在华邦电子&恩智浦2024联合技术论坛继续担任演讲嘉宾

    「华邦电子(Winbond)」是国际领先的存储器厂商,其串行 NOR Flash 产品在全球市场占有率稳居前列. 继去年华邦联合恩智浦成功搞了第一次技术论坛之后,今年华邦又联合意法半导体,恩智浦.莱迪 ...

  6. 桌面应用开发之Electron

    Electron 官网: https://www.electronjs.org/ Electron是一个使用JavaScript.HTML和CSS构建跨平台的桌面应用程序.它基于Node.js和Chr ...

  7. MySQL数据库设计规范(新)

    目录 规范背景与目的 设计规范2.1 数据库设计2.1.1 库名2.1.2 表结构2.1.3 列数据类型优化2.1.4 索引设计2.1.5 分库分表.分区表2.1.6 字符集2.1.7 程序DAO层设 ...

  8. Redis【1】- 如何阅读 Redis源码

    1 Redis 的简介 Redis 实际上是简称,全称为 Remote Dictionary Server (远程字典服务器),由 Salvatore Sanfilippo 写的高性能 key-val ...

  9. Mybatis【19】-- Mybatis自关联多对多查询

    注:代码已托管在GitHub上,地址是:https://github.com/Damaer/Mybatis-Learning ,项目是mybatis-15-oneself-many2many,需要自取 ...

  10. 推送本地镜像到 Harbor

    1.harbor没有启动 https 我本地 安装 harbor 的时候由于没有使用证书,所以将 harbor.yml https 注释掉. 2.配置docker镜像地址 比如 我的 ip 为 192 ...