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. C# 文件操作系列一

    在.Net环境中,所有关于文件操作的类都在System.IO命名空间下,注:在修改文件时,安全性显得格外重要,但是本随笔不过多讲述安全性,这里假设我们有足够的权限. 1.管理文件系统 先通过一幅图来了 ...

  2. 【开源组件】FastDFS集群搭建与实战

    FastDFS是一个轻量级的分布式文件系统,在实际生产环境往往以集群的形式部署,保证了服务的高可用.本文重点阐述FastDFS集群的搭建和项目实战. 工作流程 上传流程图 下载流程图 基本概念可参考作 ...

  3. 使用jdk生成ssl证书文件

    java自带有 ssl 证书生成的工具, 在 /bin/keytools.exe 需要确认已经正确配置JAVA_HOME的环境变量 生成服务端证书: keytool -genkey -v -alias ...

  4. 原来你是这样的http2......

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由mariolu发表于云+社区专栏 序言 目前HTTP/2.0(简称h2)已经在广泛使用(截止2018年8月根据Alexa流行度排名的头 ...

  5. <机器学习实战>读书笔记--决策树

    1.决策树的构造 createBranch伪代码: 检测数据集中的每个子项是否属于同一分类: IF SO RETURN 类标签 ELSE 寻找划分数据集的最好特征 划分数据集 创建分支节点 FOR 每 ...

  6. 问题集录--Android:解决Studio新建项目时,在 Building gradle project info 一直卡住

    Android Studio导入项目的时候,一直卡在Building gradle project info这一步,主要原因还是因为被墙的结果.gradle官网虽然可以访问,但是速度连蜗牛都赶不上.. ...

  7. Angular: 使用 RxJS Observables 来实现简易版的无限滚动加载指令

    我使用 angular-cli 来搭建项目. ng new infinite-scroller-poc --style=scss 项目生成好后,进入 infinite-scroller-poc 目录下 ...

  8. 【总结】java 后台文件上传整理

    public Map<String,String> clientUploadAttachment(Long belongId, String fileSource, MultipartFi ...

  9. &&和||的操作符妙用(javascript)

    前言 &&逻辑与和||逻辑或,它们既可以返回一个布尔值,又可以返回指定操作数的值,这个值是非布尔型的. MDN api参考 Section1 布尔运算 首先,我们明确一下基础知识. 能 ...

  10. Redis 【keys】 一句话说明

    DEL----------------------------------删除给定的一个或多个key DUMP--------------------------------序列化给定key,并返回被 ...