返回文档中匹配指定 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. CH#46 磁力块 分块

    正解:分块+bfs 解题报告: 先放个传送门,然后瞎扯淡下QAQ 突然感觉不停课大概是正确的选择QAQ 大概实在是没有天赋?明明都知道正解是分块甚至还听了下解法感觉理解了,再看一次依然没想到解法,,, ...

  2. phpstorm----------phpstorm2017基本使用

    1.关闭2017版本的,函数参数提示.关闭方式如下: 2.如何设置代码里面的变量等号对齐,和key => value 对齐     ctrl+alt+l 3.修改PHP文件类创建的默认注释 4. ...

  3. 用 MoveTowards实现多点移动

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class MoveCube ...

  4. 使用rander() 将后台的数据传递到前台界面显示出来

    1.创建templates文件夹 2.在该文件夹内创建html界面a.html 3.views.py: def a(request): love='iloveyou' return render(re ...

  5. Django框架详细介绍---ORM相关操作

    Django ORM相关操作 官方文档: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ 1.必须掌握的十三个方法 <1& ...

  6. 0003-20180422-自动化第三章-python基础学习笔记

    3章 内容回顾: 1. 计算机组成 2. 程序编译器 3. 变量 4. 条件 5. 循环 6. py2与py3区别 - 默认编码, - 除法, - input ,raw_input 7. 位,字节关系 ...

  7. idea 编译报错 未结束的字符串字面值,非法的类型开始

    1.修改编码 全局编码设置: File -> Other Settings -> Default Settings->file encoding 工程编码设置: File -> ...

  8. Beaglebone板子修改usb连接时的默认IP192.168.0.2

    首先除了有个USB线外,你还需要一个USB转串口的线(目的是防止修改错误,无法使用原来的usb的IP地址登陆,心大的可以跳过这步直接进入重点),串口线连接方法如下图: ​ 将USB以及串口和PC机相连 ...

  9. MySQL中SQL语句2

    上一片介绍了一些基本的SQL的增删改查,这一片会介绍一些进阶的SQL语句使用. MySQL中的视图 视图是什么?当我们总是查询几张表的某个字段时,可以创建一张虚拟表,把这几个字段写入这个虚拟的表,这样 ...

  10. Mysql error 1317导致从库复制断开

    环境 :Percona Server for MySQL 5.5.18 1. 报错日志: 171212 19:59:58 [ERROR] Slave SQL: Query partially comp ...