文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

querySelector-强大的原生DOM选择器

定义 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。...语法 document.querySelector(CSS selectors) 参数值介绍 必须。指定一个或多个匹配元素的 CSS 选择器。...可以使用它们的 id、类、 类型、属性、属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 异常 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。...如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。..." 属性的第一个 元素： document.querySelector("a[target]"); 5、设置文档中第一个h1的背景颜色为红色： document.querySelector("h1

1.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )

    : 属性选择器 结构伪类选择器 伪元素选择器 二、CSS3 属性选择器权重 ---- CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 , 伪类选择器 的 权重 ,...权重 表格 , 进行权重叠加计算 ; CSS 选择器 选择器优先级 - 权重计算 继承父标签的样式 , * 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器 / 伪类选择器 / 属性选择器...important 权重无穷大 三、CSS3 属性选择器 ---- CSS3 属性选择器 可以 使用特定的 CSS 属性 和 属性值 来 选择 特定 的 HTML 标签元素 ; CSS3 属性选择器...: E[att] 选择器 : E 指的是 HTML 标签元素 , att 指的是标签中定义的属性 ; 该选择器的作用是 , 将定义了 att 属性的 E 标签都选择出来 ; E[att=“val”] 选择器...: 选择 att 属性值 为 val 的 E 标签元素 ; E[att^=“val”] 选择器 : 选择 att 属性值 为 以 val 开头 的 E 标签元素 ; E[att$=“val”] 选择器

    1.2K20

    jquery选择器用法_jQuery属性选择器

    在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。...使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器 复合选择器将多个选择器...（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的...selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等...div元素 [selector1][selector2][selectorN] 说明：复合属性选择器，需要同时满足多个条件时使用 示例：

    14K30

    第87天：HTML5中新选择器querySelector的使用

    一、HTML5新选择器 1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null; 支持： Chrome...，如果没有匹配到，则返回空数组; 支持： Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+ 4、注意： document.querySelector...(selector);//返回第一个满足选择器条件的元素，一个DOM对象 document.querySelectorAll（selector);//返回所有满足该条件的元素，元素类型是dom的数组 $...('.item');//返回一个jQuery对象（dom元素的数组） 本质上jQuery方式和querySelector方式都是获取DOM数组，只不过jquery会多一些其他成员 DOM数组的每一个成员注册事件不能像...exp">实例 10 　　　　 11 实例 12 13 　　 14 15  （1）如果想要获得第一个li元素，我们只需要: 　　document.querySelector

    1.5K30

    CSS3关系选择器、属性选择器

    属性选择器 属性选择器可以根据元素的属性和属性值来选择元素，CSS3中新增的3种属性选择器： E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value...E[att$=value]是选择属性值包含后缀为value的子字符串 E[att*=value]是选择属性值包含value的子字符串，例如：div[id*=section] 表示匹配包含id属性，且id...⚠️以上三种属性选择器E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。 关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。...临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器，选择器中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。...(老大跟老二，老二跟老三) 普通兄弟选择器(～):该选择器使用‘～’来链接前后两个选择器，选择器中的两个元素有同一父亲，但第二个不必紧跟第一个元素。

    1.3K20

    【约束布局】ConstraintLayout 13 种相对定位属性组合 ( 属性组合 | 用法说明 )

    文章目录 相对定位简介 相对定位属性组合前提条件 相对定位 Left Right 四种组合属性 相对定位 Start End 四种组合属性 相对定位 Top Bottom 四种组合属性 相对定位控件约束细节...---- 相对定位属性组合前提条件 相对定位 属性 组合 前提 : 以 水平方向的 Left , Right 为例 ; 1.组合方式 : Left , Right 可以构成 四种 相位定位属性组合 ;...Left Right 四种组合属性 相对定位 属性 四种组合 : 1.组合一 : 将 被约束组件 左侧 约束到 目标组件 左侧, 构成了 layout_constraintLeft_toLeftOf 属性...属性 ; ---- 相对定位 Start End 四种组合属性 相对定位 属性 四种组合 : 1.组合一 : 将 被约束组件 开始 约束到 目标组件 开始, 构成了 layout_constraintStart_toStartOf...属性 ; ---- 相对定位 Top Bottom 四种组合属性 相对定位 属性 四种组合 : 1.组合一 : 将 被约束组件 顶部 约束到 目标组件 顶部, 构成了 layout_constraintTop_toTopOf

    1K20

    CSS 属性选择器的深入挖掘

    CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。...本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。...属性选择器最基本的用法，就是通过元素的属性值去选择 DOM 元素。...a:not([href]){ border: 1px solid red; } 当然，复杂一点，我们可以搭配不仅仅一个 :not()伪类，像是这样，可以同时多个配合使用，选择一个 href, target...important; } 组合拳用法，搭配伪元素提升用户体验 当然，属性选择器不一定只是单单的进行标签的选择。 配合上伪元素，我们可以实现很多有助提升用户体验的功能。

    1.3K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券