getElementsBy系列方法和querySelectorAll方法

最新推荐文章于 2024-01-04 17:37:30 发布

Meskjei

最新推荐文章于 2024-01-04 17:37:30 发布

阅读量3.9k

点赞数 1

分类专栏：前端 JavaScript 文章标签： getElementsBy querySelectorAll DOM

本文链接：https://blog.csdn.net/hjc256/article/details/88646996

版权

本文探讨了getElementsBy系列方法，包括getElementsByTagName、getElementsByClassName和getElementsByName，以及querySelectorAll方法。getElementsBy*系列返回动态集合，而querySelectorAll返回静态集合。文章通过实例展示了动态集合在元素变化时的实时更新，以及静态集合只返回查询时元素状态的特点。

摘要由CSDN通过智能技术生成

getElementsBy系列方法

getElementsByTagName()
getElementsByClassName()
getElementsByName()

这几个方法都是用来获取多个DOM对象的，只是通过不同的属性来查询。

而这三个方法里又属getElementsByName方法为特殊。因为只有它返回的是NodeList，其他两个则都返回的是HTMLCollection。这两个的区别在我的另一篇笔记中有过描述。

虽然如此，getElementsByName()返回的NodeList与getElementsByTagName()和getElementsByClassName()返回的HTMLCollection都是动态(live)的。

所谓的动态，就是每一次访问集合都会经过一次查询，集合内元素的变化会动态体现在集合上。例如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="