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. 初识GO语言--基础命令

  2. 【转载】scipy.stats.norm.ppf —— 分位点函数(CDF的逆)(也被用作“标准偏差乘数”)

    原文地址: https://www.cnblogs.com/jiangkejie/p/15292260.html scipy.stats.norm.ppf() 分位点函数(CDF的逆)(也被用作&qu ...

  3. MNN框架在Win10上的部署,支持OpenGL和Vulkan

    上篇记录了之前在win10上部署的流程,不过在camke的时候没有选择支持OpenGL和Vulkan.这里重新按照官方的语雀文档重新进行支持OpenGL和Vulkan的编译,简单做个记录.如果有其他的 ...

  4. Ansible自动化管理集群,Playbook语法

    Ansible配置文件存在优先级的问题 ANSIBLE_CONFIG ansible.cfg 项目目录 .ansible.cfg 当前用户的家目录 /etc/ansible/ansible.cfg A ...

  5. .NET操作Excel高效低内存的开源框架 - MiniExcel

    .Net平台上对Excel进行操作主要有两种方式.第一种,把Excel文件看成一个数据库,通过OleDb的方式进行读取与操作:第二种,调用Excel的COM组件.两种方式各有特点. 今天给大家介绍第三 ...

  6. 高德地图API-搜索提示并定位到位置,卫星地图和标准地图的切换

    // _yourMap地图实例 _yourMap.plugin(["AMap.MapType"], function () { //添加地图类型切换插件 //地图类型切换 mapT ...

  7. Blazor 组件库 BootstrapBlazor 中Alert组件介绍

    组件介绍 Alert组件几乎是组件库里必不可少的组件了,即使浏览器,也自带了一个alert,会弹出一个模态框. 但是这个模态框有点太丑了,所以各大组件库分分实现了自己的Alert组件. 当然Boots ...

  8. noip2024

    NOIP2024 游记 考试之前一直有很多话想在游记里说,但考完后又不知道该说些什么.这六个月的集训时光仿佛像一场梦一般. 怒砍\([60, 100] + 0 + 0 + 0\) 作为一个只学了不到一 ...

  9. 使用nvm管理node版本,动态切换不同版本的node(解决安装报错)

    使用nvm管理node版本,动态切换不同版本的node 1. 下载nvm安装包 下载地址,点这里进行下载 往下拉,选择 nvm-setup.zip 安装包 2. 安装nvm 注: 安装nvm之前,卸载 ...

  10. 架构发展趋势以及 d2js 的未来

    目前架构有几个热点方向:微服务, dubbo, Faas,还有 TiDB. 现在开发模式是前后端分离基本成为行规. 应该说以大部分企业业务量级.人员规模来说,要去和淘宝等大厂去对标是非常傻的.对大部分 ...