querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下:

1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。 
2、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。 
3、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。 
 
这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jquery的选择器。
 
var obj = document.querySelector("#id");
var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img"); 目前IE8+,ff,chrome都支持此api

document.querySelector和querySelectorAll方法的更多相关文章

  1. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  2. querySelector和querySelectorAll方法介绍

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

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

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

  4. js高级选择器querySelector和querySelectorAll

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

  5. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

  6. querySelector 和 querySelectorAll 的使用

    querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习.假如我们有一个 ...

  7. javaScript中的querySelector()与querySelectorAll()的区别

    之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...

  8. javascript高级选择器querySelector和querySelectorAll

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

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

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

随机推荐

  1. double保持精度,防止小数点后数字的丢失的小方法

    一般情况下,输入带小数点的字面值,编译器会把它解析成double 类型. 例如:一个字面值被直接放到代码中,由于带小数点所以,默认值为double类型   输出结果是:1.12345678912345 ...

  2. 【大数据】Linux下Storm(0.9版本以上)的环境配置和小Demo

    一.引言: 在storm发布到0.9.x以后,配置storm将会变得简单很多,也就是只需要配置zookeeper和storm即可,而不再需要配置zeromq和jzmq,由于网上面的storm配置绝大部 ...

  3. vs2015使用GIt连接git.oschina.net/

    本文转自:http://www.bubuko.com/infodetail-1066588.html.谢谢作者 先安装Git命令行,下载地址:https://github.com/git-for-wi ...

  4. 多语言架构下如何正确的使用SQL视图

    产品的定位 做产品的都知道,是否支持多语言直接影响到产品的定位问题. 如果一个产品周期是一年的话,要完美支持多语言最少也得在加3个月!所需时间和页面数量.数据库表的数量和表的数据量成正比. 可以看出代 ...

  5. WCF服务创建与使用(双工模式)

    昨天发布了<WCF服务创建与使用(请求应答模式)>,今天继续学习与强化在双工模式下WCF服务创建与使用,步骤与代码如下. 第一步,定义服务契约(Service Contract),注意Se ...

  6. Redis使用总结(1):基础使用

    Redis的安装及启动 安装 Ubuntu sudo apt-get install redis Mac sudo brew install redis Windows 不支持 启动 首先启动Redi ...

  7. c#隐藏和重写基类方法的异同

    最近正在学习c#,对其中的方法重写和隐藏的概念很是模糊,现在将其归纳如下: 1:方法重写:就是在基类中的方法用virtual关键字来标识,然后在继承类中对该类进行重写(override),这样基类中的 ...

  8. 使用JSLint提高JS代码质量

    随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式.JavaScript 语言本身是 ...

  9. 微信公众号入门学习1_使用C#,ASP.NET APIController如何公众号接入服务器并启动开发者模式

    前言:  本文是以微信公众号中的订阅号(个人)来进行简单介绍,本人也是刚刚开始学习,有不足之处,欢迎批评指正. 先粘贴2个帮助链接: 入门指引:http://mp.weixin.qq.com/wiki ...

  10. python sqlite中通过字段名获取查询结果

    在连sqlite数据库时,用fetchall()查询结果,是用row[0],row[1]这样的方式来打印每列的结果 但是我想用row[“字段名”]方式查询怎么办? import sqlite3 con ...