getElementById与querySelector的区别

首先对获取元素的几个方法有所了解

getElementById()：返回对拥有指定id的第一个对象的引用
getElementsByName()：返回带有指定名称name的对象的集合。返回的是元素的数组，而不是一个元素（由于name不唯一）
getElementsByTagName()：返回带有指定标签名的对象集合

querySelector()：返回文档中匹配指定CSS选择器的第一个元素
querySelectorAll() ：返回文档中匹配的CSS选择器的所有元素节点列表（h5新增）

document.querySelector("p")      //获取文档中第一个 <p> 元素：
document.querySelector("#demo")     //获取文档中id="demo"的元素
document.querySelector(".example");   //获取文档中第一个 class="example" 的元素
document.querySelector("p.example");    //获取文档中 class="example"的第一个 <p> 元素
......
还可以写CSS的并集选择器、复合选择器等等。按照css规范来实现。

要知道的是querySelector()方法仅仅返回匹配指定选择器的第一个元素。你可以使用querySelectorAll() 方法替代去返回匹配指定选择器的所有的元素。返回的是节点列表NodeList 对象，可以通过索引访问，索引值从0开始。

例如：

// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p");
// 通过索引访问，设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";

由于querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字。
前三种getxxxByxxx获取的是动态集合，而querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

getElementById性能更好，而querySelector按照CSS选择器规范，当在多级查找时，更为方便。

getElementById与querySelector的区别相关推荐

getElementByID() getElementsByName() getElementsByTagName()的区别 .
getElementByID() getElementsByName() getElementsByTagName()的区别 Web标准下可以通过getElementById(), getElemen ...
getElementById和getElementByTagName的区别
在原生js中获取元素的方法有很多,那么今天就重点说一下getElementById和getElementByTagName的区别: 1.getElementById前面必须是document:而get ...
getElementById和querySelector区别
1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');.通过标签名字document.getElementsByTagName(tag ...
document.getElementById与getElementsByName的区别（注意后者多个S）
1:id 就像身分证号,是唯一的, name 就像姓名一样可以同名 2:一个元素定义了 id ,引用该元素时直接用 id 属性,而 name 通常用在 form ...
javascript getElementByID,getElementsByName,getElementsByTagName的区别
getElementByID,getElementsByName,getElementsByTagName区别注意:方法区分大小写! 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小 ...
document.getElementById与getElementByName的区别
document.getElementById( "id_Number ") 得到的是单个元素 document.getElementsByName( "name & ...
getElementById 和 getElementByName的区别
getElementById 根据HTML元素指定的ID,获得唯一的一个HTML元素.如访问DIV层对像.图片Img对像等! getElementByName 根据HTML元素指定Name,获得 ...
getElementById()和$(#id)的区别
转自:https://blog.csdn.net/weixin_41989775/article/details/81063161 1.getElementById()获取的是js对象,$(" ...
如何使用JavaScript更改元素的类？
如何使用JavaScript更改HTML元素的类以响应onclick事件? #1楼对以前的正则表达式的一些小注释和调整: 如果班级列表中的班级名称不止一次,您将希望在全局范围内执行此操作. 而且,您 ...

getElementById与querySelector的区别

getElementById与querySelector的区别

getElementById与querySelector的区别相关推荐

最新文章

热门文章