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. Redis常见面试题:ZSet底层数据结构,SDS、压缩列表ZipList、跳表SkipList

    文章目录 一.Redis数据结构概述 1.1 Redis有哪些数据类型 1.2 Redis本质是哈希表 1.3 Redis的哈希冲突与渐进式rehash 1.4 数据结构底层 1.4.1 简单动态字符 ...

  2. mysql隐蔽的索引规则导致数据全表扫描

    索引是为了加速数据的检索,但是不合理的表结构或适应不当则会起到反作用.我们在项目中就遇到过类似的问题,两个十万级别的数据表,在做连接查询的时候,查询时间达到了7000多秒还没有查出结果. 首先说明,关 ...

  3. 银河麒麟操作系统root用户登录图形化界面

    第一步.为root用户设置密码 sudo passwd 设置root用户密码 第二步.开启root登录权限 vim /usr/share/lightdm/lightdm.conf.d/60-kylin ...

  4. 编写一个基础的dockerfile

    编写简单的dockerfile FROM GaohongYu/centos7.5-yum:latest MAINTAINER GaoHongYu COPY *.repo /etc/yum.repos. ...

  5. .NET云原生应用实践(六):多租户初步

    本章目标 多租户简介 实现public租户下的用户数据隔离 出于开发进度考虑,本章暂不会完全实现多租户的整套体系,而是会实现其中的一小部分:基于默认public租户的数据隔离,并在本章节中会讨论多租户 ...

  6. 鸿蒙NEXT开发案例:亲戚关系计算器

    [引言] 在快节奏的现代生活中,人们往往因为忙碌而忽略了与亲戚间的互动,特别是在春节期间,面对众多的长辈和晚辈时,很多人会感到困惑,不知道该如何正确地称呼每一位亲戚.针对这一问题,我们开发了一款基于鸿 ...

  7. 高性能消息队列之nsq

    NSQ 是实时的分布式消息处理平台,其设计的目的是用来大规模地处理每天数以十亿计级别的消息. NSQ 具有分布式和去中心化拓扑结构,该结构具有无单点故障.故障容错.高可用性以及能够保证消息的可靠传递的 ...

  8. 使用canal将数据同步到ROCKETMQ

    概述 我们需要将数据从MYSQL写入到rocketmq.实现步骤如下: 安装canal.admin 修改配置 server: port: 8849 spring: jackson: date-form ...

  9. 【COS 加码福利】COS 用户实践有奖征文,等你来投稿!

    COS用户实践征文活动火热进行中,本次征集主题为:如何在生态场景下使用 COS? 优质文章将有机会被编入腾讯云官方文档库,供广大用户学习参考.更有多重好礼等你来拿,速来围观投稿吧! 投稿说明: 1.投 ...

  10. 聊一聊坑人的 C# MySql.Data SDK

    一:背景 1. 讲故事 为什么说这东西比较坑人呢?是因为最近一个月接到了两个dump,都反应程序卡死无响应,最后分析下来是因为线程饥饿导致,那什么原因导致的线程饥饿呢?进一步分析发现罪魁祸首是 MyS ...