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. map简单用法

    let familyNames = []; familyNames = res.Data.map(item=> { return item.ArgText });

  2. Angular JS - 7 - Angular JS 常用指令2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. SQL Server 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法

    SQL Server 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法 在使用数据库的过程中,经常会遇到数据库迁移或者数据迁移的问题,或者有突然的数据库损坏,这时需要从数据库的备 ...

  4. 文字在线中间，CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...

  5. 【已转移】【Java架构：基础技术】一篇文章搞掂：SVN

    一个例子: 公司的SVN代码中,含有target等文件夹,每次生成运行后,有很多文件打扰签入 处理方案: 1.CheckOut时,点击ChooseItems选项,不要选择这些target文件夹(有点麻 ...

  6. 【ERP知识】一个VMI（供应商管理库存）实现方案

    VMI,Vendor Managed Inventory,供应商管理库存 是指客户不采购或尽量少采购物料,而是由供应商保证该物料有充足的数量,在客户需要的时候能按时提供. 这样可以降低客户方的库存成本 ...

  7. JS-iframe高度自适应内容

    iframe:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe iframe 内容加载后不改变 使用:onload=&q ...

  8. Jenkins构建触发器的区别

    Build periodically:定时进行项目构建或执行(它不care源码是否发生变化),配置如下: 0 2 * * *  (每天2:00 必须build一次源码) 如果是要定时执行脚本,需要选择 ...

  9. Asp.Net Core 第01局：项目创建和部署 转载https://www.jianshu.com/p/9c9750e23b3e

    总目录 一.前言 本文通过从项目创建到部署,简单介绍Asp.Net Core. 二.环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 三.开局 第一手:创建项目   ...

  10. laravel框架基础知识总结

    一.laravel简介 laravel是一套优雅简介的PHP开发框架,受欢迎程度非常之高,功能强大,工具齐全:以下是本人在学习过程中记录的laravel比较基础的资料,权当学习笔记,请大神们多多指教 ...