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

  1. //取得body元素
  2. var body = document.querySelector('body');
  3. //取得id为'myDiv'的元素
  4. var myDiv = document.querySelector('#myDiv');
  5. //取得类为'selected'的第一个元素
  6. var selected = document.querySelector('.selected');
  7. //取得类为'button'的第一个图像元素
  8. var img = document.querySelector('img.button');

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

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

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

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

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. http 协议的简单学习 虽然有点老但是 还不错

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  2. Nvelocity中格式化金钱和日期

    //格式化金钱(  9,999.00)function formatCurrency(num) {    num = num.toString().replace(/\$|\,/g, '');    ...

  3. 未来HTML6出现的10个特性

    网络技术正趋向于发展为一个巨大的移动APP市场,在Web开发的革命浪潮中起着指示性作用,自HTML引入以来,创建可转换,有新意的网络移动应用程序变得So easy,web开发中运用先进技术也很容易处理 ...

  4. STM32 从M3到M4

    一 考虑STM32不同系列移植的外设资源情况: STM32微控制器应用的移植和兼容性指南AN3364 二 M4的DSP/FPU的使用方法https://blog.csdn.net/electrocra ...

  5. Surface Shader(表面着色器)

    Shader "Custom/Surface_Shadeer" { Properties {                                             ...

  6. (转)AIX下的MPIO、RDAC、SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系)

    AIX下的MPIO.RDAC.SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系) 原文:http://blog.163.com/huangbao_007 ...

  7. Cloudera Kudu是什么?

    不多说,直接上干货! Cloudera Kudu是什么? kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式列式存储数据库.兼具了hbase的实时性.hdf ...

  8. eclipse启动的时候报错An internal error occurred during: "Initializing Java Tooling"

    eclipse ->windows ->Perspactive -> Reset perspactive 重置视图可以解决

  9. jq学习总结之方法

    三.方法 1.length 2.index()3.get() reverse()4.not()5.filter()6.find()7.each()8.addBack()9.attr()10.toggl ...

  10. C# 字节数组和十六进制字符串之间转换的另类写法

    今天从http://www.cnblogs.com/NanaLich/archive/2012/05/24/2516860.html看到的,记录下来 主要是XmlSerializationReader ...