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. 基于Anaconda 安装 geatpy 和 tensorflow

    装了好久的第三方包终于成功了,暴风哭泣!!!总结一下 分两部分说: 一. 首先是在本地电脑windows系统下装: 首先安利一下这个包括各种 Genetic and Evolutionary Algo ...

  2. Secondary NameNode究竟是做什么的

    Secondary NameNode:它究竟有什么作用? 在hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备 ...

  3. jedis 整合 Spring

    一,   单机版整合spring 1. 使用默认配置文件进行配置 <bean id="redisClient" class="redis.clients.jedis ...

  4. 深度学习(十五) TextCNN理解

    以下是阅读TextCNN后的理解 步骤: 1.先对句子进行分词,一般使用“jieba”库进行分词. 2.在原文中,用了6个卷积核对原词向量矩阵进行卷积. 3.6个卷积核大小:2个4*6.2个3*6和2 ...

  5. 剑指offer(1-10)编程题

    二维数组中的查找 替换空格 从尾到头打印链表 重建二叉树 用两个栈实现队列 旋转数组的最小数字 斐波那契数列 跳台阶 变态跳台阶 矩形覆盖 1 .在一个二维数组中,每一行都按照从左到右递增的顺序排序, ...

  6. Python(2):创建函数模块

    说明: 在使用python的时候我们除了使用内置的函数之外,可能还需要使用一些别人写的函数.或者我们写的代码也希望可以给其他人使用.要实现这样的功能,我们就需要按照下面的步骤来定义自己的模块: Ste ...

  7. [转]How to get return values and output values from a stored procedure with EF Core?

    本文转自:https://stackoverflow.com/questions/43935345/how-to-get-return-values-and-output-values-from-a- ...

  8. del

    Before writing it I spent a fair amount of time on reviewing our chat-log. How silly. asljdfajsodfss ...

  9. 利用三层判断sql数据库中编码是否已经存在(个人拙作,不喜勿喷)

    本人.Net新手,初学三层便想记录写笔记,以供像自己一样的新人去学习,大神就不用看啦 Dal层: /// 判断编码是否存在 /// </summary> /// <param nam ...

  10. zsh: command not found: gulp

    明明安装了gulp,但是为什么执行gulp命令却在控制台输出 zsh: command not found: gulp 可能因为gulp没有被全局安装 在控制台输入 which gulp 如果输出 g ...