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");

javascript之 原生document.querySelector和querySelectorAll方法的更多相关文章

  1. document.querySelector和querySelectorAll方法

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

  2. javascript 高级选择器:querySelector 和 querySelectorAll

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

  3. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  4. querySelector和querySelectorAll方法介绍

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

  5. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  6. 高级选择器querySelector和querySelectorAll

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

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

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

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

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

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

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

随机推荐

  1. tp5.0 根据经纬度 获取附近信息

    自己备注一下 /* *参数说明: *$lng 经度 *$lat 纬度 *$distance 周边半径 默认是500米(0.5Km) */ public function returnSquarePoi ...

  2. [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式

    [From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...

  3. Mac下常用按键符号⌘(command)、⌥(option)、⇧(shift)、⇪(caps lock)、⌃(control)、↩(return)、⌅(enter)

    常用符号如下: ⌘(command) ⌥(option) ⇧(shift) ⇪(caps lock) ⌃(control) ↩(return) ⌅(enter) 对应键盘的位置如下: 如果每次都不记得 ...

  4. C#原生压缩和解压缩方法

    string path = AppDomain.CurrentDomain.BaseDirectory; string startPath = @"c:\Client"; stri ...

  5. ActiveMQ:Exception occurred while processing this request, check the log for more information!

    出现上面错误的原因有以下两种 1 jdk的版本和activemq的版本不符 安装完ActiveMQ之后,通过http://IP:8161登陆到控制台. 通过测试代码给服务端发送队列消息,在控制台点击q ...

  6. solr集群的搭建教程和使用入门

    1 什么是SolrCloud? SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当一个系统的索引数据量少的时候 ...

  7. Python2.7环境下安装pydbg

    From:http://blog.csdn.net/cheng_tian/article/details/7652058 最近在看<Python灰帽子:黑客与逆向工程师的Python编程之道&g ...

  8. 什么是 JWT -- JSON WEB TOKEN

    看链接:http://www.jianshu.com/p/576dbf44b2ae 来个工具类: import java.io.Serializable; import java.util.Date; ...

  9. 一头扎进Spring之---------Spring七大核心模块

    Spring七大核心模块 核心容器(Spring Core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系.Spring使用BeanF ...

  10. 各种数据库maven的pom文件编写与ibernate链接配置

    各种数据库Hibernate链接配置 Derby db driver maven dependency <dependency>         <groupId>org.ap ...