返回文档中匹配指定 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. 洛谷P3167 通配符匹配 [CQOI2014] 字符串

    正解:哈希+dp/AC自动机/kmp 解题报告: 传送门! 这题解法挺多的,所以就分别港下好了QwQ 首先港下hash+dp趴 可以考虑设dp式f[i][j]:匹配到第i个通配符了,下面那个字符串匹配 ...

  2. ELK基础原理

    搜索引擎 索引组件:  获取数据-->建立文档-->文档分析-->文档索引(倒排索引)    搜索组件:  用户搜索接口-->建立查询(将用户键入的信息转换为可处理的查询对象) ...

  3. ubuntu 使用dpkg手动安装deb包时发生循环依赖的解决办法

    将循环依赖的所有包放到同一个命令行里一起安装,如: sudo dpkg -i libnss3-nssdb_3.28.4-0ubuntu0.14.04.4_all.deb libnss3_3.28.4- ...

  4. chrome下调试安卓app 之 ionic

    打开chrome浏览器,输入chrome://inspect/#devices,将安卓手机插入电脑上,打开手机设置 打开 开发者调试usb调试 ,网页上会出现 input 点击, 就会看见consol ...

  5. 使用 Asp.net core 2.0 + Angular 4 构建车辆管理的Web应用程序

    https://www.codeproject.com/Articles/1210559/Asp-net-core-Angular-Build-from-scratch-a-web

  6. sql server 按年月日分组

    sql server  按年月日分组 ----------------------------------------------- --author:yangjinwang --date:2017- ...

  7. Linux上不了网的几个排查点

    下面是所有系统通用排查流程: 1.先ping网关: 例ping 192.168.12.1: 如果能通说明本地IP配置和本地到路由器的链路未发生问题. 如果不通需要检查本地设置和本地到路由的网线连接状态 ...

  8. MariaDB glare cluster简介

    MariaDB MariaDB 是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服务器,MariaDB是同一MySQL版本的二进制替代品, 当前最新版本1 ...

  9. 51Nod 1058 N的阶乘的长度

    输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3.   Input 输入N(1 <= N <= 10^6) Output 输出N的阶乘的长度 Input示例 6 Out ...

  10. php 根据日期获取星座

    根据日期获取星座 /* * * 获取星座 * 星座是按阳历来计算的 * $month 阳历月份 * $day 阳历日期 * */ public static function get_xingzuo( ...