querySelector() 方法
返回文档中匹配指定 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() 方法的更多相关文章
- getElementById和querySelector方法的区别
"querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...
- HTML DOM querySelector() 方法
Document 对象 实例 获取文档中 id="demo" 的元素: document.querySelector("#demo"); <!DOCTY ...
- Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。
文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...
- IE6、IE7兼容querySelectorAll和querySelector方法-最终版本
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏 ...
- IE6、IE7兼容querySelectorAll和querySelector方法
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...
- js之querySelector方法
querySelector()接受一个CSS选择符,返回匹配的第一个元素,反之则NULL. 如: var body = document.querySelector('body'); var mydi ...
- querySelector.. 方法相比 getElementsBy..
querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List. 看看下面这个经典的例子 [5]: ...
- querySelector和getElementById方法的区别
一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getEle ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
随机推荐
- 委托/lambda表达式/事件
委托 委托是执行安全的类,它的使用方式与类类似(即都需要定义再实例化),不同在于,类在实例化之后叫对象或类的实例,但委托在实例化后仍叫委托,委托可以把函数作为参数传递. 语法声明: delegate ...
- 目标检测(五)YOLOv1—You Only Look Once:Unified,Real-Time Object Detection
之前的目标检测算法大都采用proposals+classifier的做法(proposal提供位置信息,分类器提供类别信息),虽然精度很高,但是速度比较慢,也可能无法进行end-to-end训练.而该 ...
- 目标检测(四)Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun SPPnet.Fast R-CNN等目标检测算法已经大幅降低了目标检测网络的运行时间. ...
- python摸爬滚打之day26----网络编程之socket
1.网络通信原理 互联网的本质就是一系列的网络协议, 统称为互联网协议. 互联网协议的功能:定义计算机如何接入internet,以及接入internet的计算机通信的标准. 互联网协议按照功能不同分为 ...
- C#中的double类型数据向SQL sqerver 存储与读取问题
1.存储 由于double类型在SQLsever中并没有对应数据,试过对应float.real类型,发现小数位都存在四舍五入的现象,目前我使用的是decimal类型,用此类型时个人觉得小数位数应该比自 ...
- 使用Vivado初探ZedBoard的OLED驱动
一.原理简介 Vivado版本:2016.2 OLED型号:128*32的UG-2832HSWEG04 ZedBoard的OLED部分电路原理图如下:(需要我们关心的是我用红色椭圆标注出来的3处,一共 ...
- 20190404 Informatic 学习一
ETL 1. Informatic 下载 下载地址:https://edelivery.oracle.com/osdc/faces/Home.jspx,没有账号可以自己注册一个Oracle账号. 不得 ...
- Python 总结
python3.7下载地址 Python安装pip 1.首先检查linux有没有安装python-pip包,直接执行 yum install python-pip 2.没有python-pip包就执行 ...
- ionic3 在ios9.0 系统下 会出现ReferenceError:Can't find variable:Intl 错误提示
ionic3 框架开发app 在ios 9.0版本中 ReferenceError:Can't find variable:Intl 错误提示: 在index.html 文件中添加 <scri ...
- CentOS 7 源码搭建LNMP环境
搭建 LNMP 环境 源码包版本 : CentOS Linux 7 nginx-1.15.1.tar.gz mysql-boost-5.7.21.tar.gz php-7.2.7.tar.gz ...