querySelector()方法
querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。

//取得body元素
var body = document.querySelector('body');
//取得id为'myDiv'的元素
var myDiv = document.querySelector('#myDiv');
//取得类为'selected'的第一个元素
var selected = document.querySelector('.selected');
//取得类为'button'的第一个图像元素
var img = document.querySelector('img.button');

querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个css选择服,但返回的是所有匹配的元素而不仅仅是一个元素。
这个方法返回的是一个NodeList实例

//取得某<div>中的所有<em>元素(类似于getElementsByTagName('em'))
var ems = document.getElementById('myDiv').querySelectorAll('em'); //取得类为'selected'的所有元素
var selecteds = document.querySelectorAll('.selected'); //取得所有<p>元素的所有<strong>元素
var strongs = document.querySelectorAll('p strong');

要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法

var i,len,strong;
for(i=0; len=strongs.length; i<len; i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = 'import';
}

DOM(三):querySelector和querySelectorAll的更多相关文章

  1. DOM API querySelector与querySelectorAll的用法

    DOM API querySelector与querySelectorAll的用法:  http://www.qttc.net/201309371.html querySelectorAll与quer ...

  2. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  3. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  4. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

    使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...

  6. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. javascript DOM扩展querySelector()和和querySelectorAll()

    选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...

  8. javascript选择器querySelector和querySelectorAll的使用和区别

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

  9. js高级选择器querySelector和querySelectorAll

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

  10. querySelector和querySelectorAll方法介绍

    module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...

随机推荐

  1. 3.数据校验和SpringEL

    1.数据验证 数据验证不应该被限定在web层去处理,他应该在任何需要做数据验证的地方做验证: 基于以上考虑,Spring设计了一个既方便又可以在所有层使用的Validator接口 Spring提供了V ...

  2. spark Failed to get database default, returning NoSuchObjectException

    解决方法:1)Copy winutils.exe from here(https://github.com/steveloughran/winutils/tree/master/hadoop-2.6. ...

  3. 第十一章:DOM扩展

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用dango框架搭建博客网站

    1.我早先下载了Anaconda35.0.1.但是Anaconda自带的编辑器Spyder我用的不太熟练.所以还是使用Pycharm来编辑代码.我的Pycharm试用期已经到了,所以需要注册码来使用P ...

  5. python django 基本测试

    http://www.runoob.com/django/django-model.html django-admin startapp TestModel /models.py from djang ...

  6. oracle 12.1.0.2的mgmt 导致的ORA-01017 bug

    两节点12c RAC,在两节点上export ORACLE_SID再sqlplus / as sysdba都正常登录,然而Commvault通过service_name方式(sqlplus sys/p ...

  7. vue 状态管理vuex(九)

    通过props 及 $emit在父子组件通讯,对应频繁更新状态考虑使用vuex store.js export default { // 存储状态值 state: { count: 0 }, // 状 ...

  8. HBase学习(二)

    HBase安装说明: HBase下载地址: http://archive.apache.org/dist/hbase/ 更新比较多的版本是比较稳定,使用周期比较长的版本 HBase表操作命令:http ...

  9. php关于网页乱码问题

    指定浏览器打开网页的编码格式: <meta http-equiv="Content-Type" content="text/html; charset=gb2312 ...

  10. 模糊查询(like)

    1. 找出名中包含 “厂”的所有供应商的名select * from provider where pro_name like '%厂%'2.第二个字为华select * from provider ...