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. react hooks 渲染性能

    目录 目录 重复渲染 React.memo() 例子 React.useMemo 例子 React.useMemo 也可以绑定 jsx和tsx对象 React.useCallback() 例子 重复渲 ...

  2. Python新手教学

    ## 简介Python是一种简单易学的编程语言,广泛应用于各个领域,包括Web开发.数据科学.人工智能等.本文将为新手程序员提供Python基础知识的教学,包括变量.数据类型.条件语句.循环.函数等内 ...

  3. php open_basedir的使用

    今天跨省问为什么file_exists检测一个相对路径的文件无法获取到true,文件明明有,但是获取不到,我看了一下,感觉可能是因为这个文件是软链接过来的有关系. 然后他找了找发现是和这么一个文件.u ...

  4. CritiCS:智能协作下的创意长篇故事生成框架 | EMNLP'24

    来源:晓飞的算法工程笔记 公众号,转载请注明出处 论文: Collective Critics for Creative Story Generation 论文地址:https://arxiv.org ...

  5. 【昌哥IT课堂】MySQL8.3 EXPLAIN中的新JSON格式(译)

    MySQL提供了两个用于分析查询计划的强大工具:EXPLAIN和EXPLAIN ANALYZE.EXPLAIN显示优化器选择的执行计划,并在执行之前停止,而EXPLAIN ANALYZE实际执行查询并 ...

  6. Java ScheduledThreadPoolExecutor延迟或周期性执行任务

    ImportNew注: 本文由新浪微博:@小飞侠_thor投稿至ImportNew.感谢@小飞侠_thor ! 如果你希望分享好的原创文章或者译文,欢迎投稿到ImportNew. Java提供的Tim ...

  7. Impala学习--Impala概述,Impala系统架构

    Imapla概述 Impala是Cloudera公司的一个实时海量查询产品.是对于已有Hive产品的补充.Impala采用了和Hive相同的类SQL接口,但并没有采用MapRed框架执行任务,而是采用 ...

  8. Converter Tutorial

    Setting up a simple example This is the most basic converter... let's start with a simple Person: pa ...

  9. Mybatis【16】-- Mybatis多对一关联查询

    注:代码已托管在GitHub上,地址是:https://github.com/Damaer/Mybatis-Learning ,项目是mybatis-12-many2one,需要自取,需要配置mave ...

  10. DB-GBP功能使用探索

    目录 1.DBGPT支持的功能 2.配置StarRocks数据库 3. ChatBI 4. APP创建使用 5. 元数据库配置 6. API 调用探索 6.1 app 6.2 datasources ...