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. 在Eclipse中配置安卓的开发环境 （踩过的坑）

    这个学期学校有门安卓程序设计课需要安装安卓开发环境. 一开始安装的是Andriod Studio,但是过程很坎坷很心酸,遇到各种各样的问题,最后还没有解决. 没办法决定用Eclipse配置安卓环境,虽 ...

  2. c++ 预处理指令#define, #endif...

    常见的预处理指令有: # 空指令,无任何效果 # include 包含一个源代码文件 #define 定义宏 #undef 取消已定义的宏 #if 如果给定条件为真,则编译下面代码 #ifdef 如果 ...

  3. Vue学习笔记-作用域插槽

    有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数. <div id=" ...

  4. 【C++11新特性】 C++11智能指针之weak_ptr

    如题,我们今天要讲的是C++11引入的三种智能指针中的最后一个:weak_ptr.在学习weak_ptr之前最好对shared_ptr有所了解.如果你还不知道shared_ptr是何物,可以看看我的另 ...

  5. window使用

    运行命令 regedit #注册表编译器 firewall.cpl #打开防火墙配置 powershell #打开powershell control #打开控制面版 cnpa.cpl #打开网络设置 ...

  6. 前端每日实战：23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  7. Java程序执行的过程

    ava程序执行的过程: Step1:将字节码加入内存: Step2:对字节码进行合法性检查: Step3:jvm会为每个字节码文件都生成一个对象(class): Step4:执行静态代码块,初始化静态 ...

  8. html中ul，ol和li的区别

    ul是无序列表,全称是unordered list,先来个例子:    ●张三    ●李四    ●王二    ●刘五   ol是有序列表 ,全称是ordered list,同样举个例子:  1.张 ...

  9. python的迭代器（转自廖雪峰老师python基础）

    我们已经知道,可以直接作用于for循环的数据类型有以下几种:一类是集合数据类型,如list.tuple.dict.set.str等:一类是generator,包括生成器和带yield的generato ...

  10. SPRING CLOUD微服务DEMO-下篇

    目录 1 Hystix 1.1 简介 1.2 配置并测试 2. Feign 2.1 简介 2.2 使用Feign 2.3 负载均衡 2.4 Hystrix支持 2.5.请求压缩 3. Zuul网关 3 ...