返回文档中匹配指定 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. 最全的MonkeyRunner自动化测试从入门到精通(7)

    jython-installer-2.5.3.jar安装步骤步骤一:Jython的安装比较简单,Jython的安装程序本身就是一个Java应用程序,因此,在安装之前,你必须具备Java运行的环境. 步 ...

  2. TP框架中分页类的使用

    public function test(){ $m=M('Message'); import('ORG.Util.Page');// 导入分页类 $count = $m->count();// ...

  3. 初始Redis

    一.NoSql数据库(Not Only Sql): 1.又称为非关系型数据库,主流的NoSql数据库有: Redis,Hbase,MongoDB 2.NoSql产生的背景: 1.1.数据库的高并发的读 ...

  4. docker+rabbitmq的安装

    docker pull rabbitmq:management docker run -d -p : -p : -p : -p : -p : -v /data/rabbitmq-data/:/var/ ...

  5. enzyme design 整体流程及感想

    想起什么来写什么吧. 整体流程(以Ceas2, TPP, G3P为例): 准备蛋白即配体参数文件: 设置CST文件: 准备protocol和flag文件: 运行enzyme_design: 结果处理. ...

  6. [ Python ] OpenGL

    pyOpenGL Installation Package Version------------------- -------numpy 1.14.2 PyOpenGL 3.1.0 PyOpenGL ...

  7. JSONModel(I)

    JSONModel使用简介 JSONModel 只需要将你的 model 类继承自 JSONModel ,而同时 model 中的属性名又恰巧可以和 JSON 数据中的 key 名字一样的话,那么非常 ...

  8. HTML基础教程

    <!DOCTYPE html><html> <head> <title></title> </head> <body> ...

  9. write RE validation

    正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式通常被用来检索.替换那些符合某个模式(规则) ...

  10. opencv学习之路(27)、轮廓查找与绘制(六)——外接圆、椭圆拟合、逼近多边形曲线、计算轮廓面积及长度、提取不规则轮廓

    一.最小外接圆 #include "opencv2/opencv.hpp" #include<iostream> using namespace std; using ...