1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 可通过指定下标的方法获取某个的元素，例如document.querySelectorAll('.ubox')[0]，表示获取第一个。
返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 
这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。
 
3、getElementsByTagName() 方法可返回带有指定标签名的对象的集合。document.getElementsByTagName("p")[3]获取指定元素。
4、getElementById()返回指定的元素。
 

js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别的更多相关文章

  1. document.querySelectorAll() 兼容 IE6

    不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...

  2. [label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？

     轉載出處: http://www.zhihu.com/question/24702250 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName g ...

  3. JavaScript中querySelector()和getElementById()（getXXXByXX）的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  4. querySelectorAll 方法相比 getElementsBy 系列方法有什么区别

    感谢 http://www.zhihu.com/question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...

  5. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  6. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  7. document.querySelector()与document.querySelectorAll()

      document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...

  8. JS - 把类似document.querySelectorAll(".xxx")、document.getElementsByName("xxx")这种方法的返回结果转换成数组对象

    var btns = document.querySelectorAll(".btn");console.log(btns instanceof Array); // falseb ...

  9. Array.prototype.slice.call(document.querySelectorAll('a'), 0)

    Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法 ...

随机推荐

  1. JS中的setTimeout()函数

    1.setTimeout() 方法 setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式.返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行. s ...

  2. codeforces gym 100345I Segment Transformations [想法题]

    题意简述 给定一个由A C G T四个字母组成的密码锁(每拨动一次 A变C C变G G变T T变A) 密码锁有n位 规定每次操作可以选取连续的一段拨动1~3次 问最少几次操作可以将初始状态变到末状态 ...

  3. 杂项-Map：高德地图

    ylbtech-杂项-Map:高德地图 1.返回顶部 1. 开放分类:地图手机软件高德地图(Amap) 是国内一流的免费地图导航产品,也是基于位置的生活服务功能最全面.信息最丰富的手机地图,由国内最大 ...

  4. CentOS7下安装安装android sdk & gradle

    参考: 谢谢大佬! https://blog.csdn.net/jiangxuexuanshuang/article/details/88600574 主要就是安装sdk 与 gradle sdk下载 ...

  5. 使用Android Studio打出apk包

    参考: Android Studio 超级简单的打包生成apk https://blog.csdn.net/hefeng6500/article/details/79869647 为什么要打包: ap ...

  6. Windows 08R2_AD图文详解

    目录 目录 软件环境 Active Directory域服务 AD的应用 创建ADDS域 使用Windows窗口来创建ADDS域控制器 使用Powershell来创建ADDS域控制器 检查ADDC域控 ...

  7. 0.OpenCV框架

    reference: https://docs.opencv.org/4.1.2/ 基本使用 1.图片和视频,读写(2,8) 2.OpenCV基本数据类型(3) 3.OpenCV大型数据类型及操作:图 ...

  8. PAT_A1069#The Black Hole of Numbers

    Source: PAT A1069 The Black Hole of Numbers (20 分) Description: For any 4-digit integer except the o ...

  9. Ascii Chart

    Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex | Char Dec Oct Hex -------------------------- ...

  10. box-shadow 制作单边阴影效果,不影响其它边的效果

    box-shadow 制作单边阴影效果,不影响其它边的效果:  https://blog.csdn.net/u010289111/article/details/53171128 CSS 样式实现单边 ...