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. leetcode-15双周赛-1289-下降路径最小和

    题目描述: 方法一:动态规划 O(N^3) class Solution: def minFallingPathSum(self, arr: List[List[int]]) -> int: n ...

  2. SimpleDateFormat线程不安全原因及解决方案

    一. 线程不安全验证: /** * SimpleDateFormat线程安全测试 * 〈功能详细描述〉 * * @author 17090889 * @see [相关类/方法](可选) * @sinc ...

  3. IO操作之ObjectInputStream与ObjectOutputStream

    之前写过DataInputStream和DataOutputStream,使用这两个类可以对java基本数据类型进行序列化和反序列化. 本篇再来两个新东西:ObjectInputStream,Obje ...

  4. 远程仓库（GitHub）的使用

    1.注册登录 在 GitHub 上注册登录 暂时忽略不讲 2.创建新的远程仓库 在GitHub网站上创建新的仓库.不管你是先在本地创建仓库还是先在远程创建仓库,要想把代码提交到远程仓库都是要先手动创建 ...

  5. shell（计算机壳层）（二）

    shell 命令常用命令cat 文件名 输出文件内容到基本输出(屏幕 or 加>fileName 到另一个文件)cb 格式化源代码chmod //change mode,改变文件的权限cp co ...

  6. textarea 根据光标位置添加内容

    // 获取焦点 let txt = document.getElementById("countRule"); let temp = txt.value; txt.focus(); ...

  7. 20 October in ss

    Contest A: sum 快速读. B: 鬼谷子的钱袋(coin) 贪心. 按照类似二进制的方式准备钱袋:1, 2, 4, 8, ... 以此装入的钱袋数目记为 \(N\). 如果最后剩余不足以凑 ...

  8. [python面试题] 什么是单例，单例有什么用，业务场景是什么

    单例概念: 单例是一个特殊的类,这个类只能创建一次实例,例子如下: 1.a = Std(name='leo'), b = Std(name='jack'),两者的指向都是name=‘leo’的对象: ...

  9. 小程序UI自动化（一）：appium小程序自动化尝试

    appium 进行 小程序自动化尝试: 由于工作中进行app自动化用的是appium,故首先尝试用appium进行小程序自动化,以美团小程序为例(python脚本实现) 一.配置基础信息 启动微信ap ...

  10. Visual Studio禁用IntelliSense

    通过Everything搜索feacp.dll,然后修改其名字或者直接删除之. 重启Visual Studio.