返回文档中匹配指定 CSS 选择器的一个元素。

虽然IE8中没有getElementsByClassName()但可以用querySelector()代替

注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

querySelector

获取文档中 class="example" 的第一个元素:

document.querySelector(".example");

querySelectorAll

获取文档中所有 class="example" 的 <p> 元素, 并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:

var x=document.querySelectorAll("p.example");
x[0].style.backgroundColor='red';

设置文档中所有 class="example" 元素的背景颜色:

var x=document.querySelectorAll(".example");
for(var i=0;i<x.length;i++){
x[i].style.backgroundColor='red';
}

querySelector() 方法的更多相关文章

  1. getElementById和querySelector方法的区别

    "querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...

  2. HTML DOM querySelector() 方法

     Document 对象 实例 获取文档中 id="demo" 的元素: document.querySelector("#demo"); <!DOCTY ...

  3. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  4. IE6、IE7兼容querySelectorAll和querySelector方法-最终版本

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏 ...

  5. IE6、IE7兼容querySelectorAll和querySelector方法

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...

  6. js之querySelector方法

    querySelector()接受一个CSS选择符,返回匹配的第一个元素,反之则NULL. 如: var body = document.querySelector('body'); var mydi ...

  7. querySelector.. 方法相比 getElementsBy..

    querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List. 看看下面这个经典的例子 [5]: ...

  8. querySelector和getElementById方法的区别

    一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getEle ...

  9. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

随机推荐

  1. 10.9-uC/OS-III任务管理

    1.OSTaskCreate () 要使用 uC/OS 的任务必须先声明任务控制块和创建任务,调用 OSTaskCreate () 函数可以创建一个任务. 2.OSTaskSuspend () OST ...

  2. python框架之Django(12)-认证系统之auth模块

    我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Django作为一个完美主义者的终极框 ...

  3. python 控制语句基础---->代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 | 作用域:作用的范围

    # ### 代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 # ### 作用域:作用的范围 print(11) print(12) prin ...

  4. 【Common】NO.81.Note.1.Common.1.001-【各种英文符号的表示及念法】

    1.0.0 Summary Tittle:[Common]NO.81.Note.1.Common.1.001-[各种英文符号的表示及念法] Style:Common Series:Common Sin ...

  5. aws cloudwatch监控怎么通过钉钉机器人报警

    最近在完善海外业务在aws服务的CloudWatchh监控,发现CloudWatch报警通知要通过aws的sns服务,直接支持的通道有短信和邮件,但是我们想推到钉钉群里面的群机器人里面这个就要借助aw ...

  6. python数据结构-如何在列表、字典、集合中根据条件筛选数据

    如何在列表.字典.集合中根据条件筛选数据 问题举例: 过滤列表[1, 2, 5, -1, 9, 10]中的负数 筛选字典{“zhangsan”:97, "lisi":80, &qu ...

  7. string和int的相互转换方法

    string转为int string str = "100000"; stringstream ss; ss << str; int i; ss >> i; ...

  8. python进阶(四) windows下虚拟环境使用

    虚拟环境作用: 1. 通常开发一个项目,会安装很多的第三方包,这时第三方包我们是安装在本机环境的.那么如果项目进行部署或移植的时候是不是要重新安装这些包???? 2.开发环境,同时在做两相项目,同时要 ...

  9. 开发流程(Vue)

    1.当你拿到一个需求时,先不要着急完成静态页面 2.重点观察数据结构,进行数据的分析,包括前端所需要的数据类型从而进行数据类型定义(如果是前后端分离的情况下,建议不要考虑前端数据和数据库的数据类型对应 ...

  10. SV randomize

    randomize中的变量只支持2-state的values,不支持4-states. randc类型的变量不能被约束在solve------before的语句中. constraint可以被定义在c ...