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. flask中间件请求流程

    from flask import Flask,session,url_for,request,flash,get_flashed_messages app = Flask(__name__) app ...

  2. python学习笔记（二）列表操作

    列表及列表操作: 列表是最常用的数据类型之一,列表也叫数组,列表定义,使用[]即可:列表里面可以再套列表,一个里面套一个列表,叫二维数组:一个里面套一个列表,里面的列表再套一个列表,这个叫三位数组,套 ...

  3. Jmeter处理https请求

    首先来看一下HTTPS和HTTP的区别主要如下: 1.https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用. 2.http是超文本传输协议,信息是明文传输,https则是具有安全性的s ...

  4. 【转】 Linux 的目录详解 （Linux基础一）

    前言 转自: http://c.biancheng.net/view/2833.html 进行了一些提炼和修改. 学习 Linux,不仅限于学习各种命令,了解整个 Linux 文件系统的目录结构以及各 ...

  5. pdf兼容问题不能正常预览

    刚开始以为是这个PDF文件过大导致的 发现其他更大的文件也能正常显示 考虑到PDF的兼容问题 由于导出的PDF格式不兼容导致,如果有这种情况,可以尝试用word2016打开pdf文件,再导出成pdf.

  6. python 打印日历

    import calendar as c'''x = c.monthcalendar(2017,11) 使用这个结果打印出日历 s = 1while s <= 7: print('周%d '%( ...

  7. ESET激活码，可用。

    ESET Internet Security 12.1.31.0 Finalhttps://download.eset.com/com/eset/apps/home/eis/windows/v12/1 ...

  8. 插件化框架解读之四大组件调用原理-Activity（三）上篇

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本文通过Activity调用原理来解读Replugin插件化技术 ...

  9. 如何判断索引是否生效--explain

    explain 显示了MySql 如何使用索引来处理select语句以及连接表. 使用方式在select 前面加上 explain就可以了 示例:explain select id , name ta ...

  10. 通过URL传参数，然后第二个页面需要获取参数

    /** * 方法说明:通过url参数键值名称获取参数的值 * @method getQueryString * @param name 要获取的参数键值 * @return * @remark */ ...