JavaScript中getElementById与querySelector区别

最新推荐文章于 2024-05-30 11:27:58 发布

前端~初学者

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/DZQ1223/article/details/131243726

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

JavaScript中getElementById与querySelector区别

1、getElement(s)Byxxxx 的用法
2、querySelector() 和 querySelectorAll() 用法
- 2.1 querySelector() 方法
- 2.2 querySelectorAll() 方法
3、区别

1、getElement(s)Byxxxx 的用法

1.1 getElementById() 方法

定义： 	getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
		如果没有指定 ID 的元素返回 null;
		如果存在多个指定 ID 的元素则返回第一个;
		如果需要查找到那些没有 ID 的元素，你可以考虑通过CSS选择器使用 querySelector();
语法:	document.getElementById(elementID);
参数值： String	必须。元素ID属性值。
返回值:  元素对象	指定ID的元素

1.2 getElementsByClassName() 方法

定义：	getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
		NodeList 对象代表一个有顺序的节点列表。NodeList 对象 可通过节点列表中的节点索引号来访问表中的节点(索引号由0开始)。
提示：  可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
语法： 	document.getElementsByClassName(classname)
参数： 	String	必须 需要获取的元素类名。  多个类名使用空格分隔，如 "test demo"；
返回值：	NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。

1.3 getElementsByTagName() 方法

定义：   getElementsByTagName() 方法可返回带有指定标签名的对象的集合；
提示：   参数值 "*" 返回文档的所有元素；
语法：	document.getElementsByTagName(tagname)
参数：	String	必须  要获取元素的标签名；
返回值： NodeList 对象	指定标签名的元素集合

2、querySelector() 和 querySelectorAll() 用法

2.1 querySelector() 方法

定义：   querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素；
注意：   querySelector() 方法仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请用 querySelectorAll() 方法替代；
语法：   document.querySelector(CSS selectors)；
参数值： String  必须。指定一个或多个匹配元素的 CSS 选择器。使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
        对于多个选择器，使用逗号隔开，返回一个匹配的元素。
返回值:  匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

2.2 querySelectorAll() 方法

定义：   querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象；
         NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始；
提示:    可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；
语法：   elementList = document.querySelectorAll(selectors);
	     elementList 是一个静态的 NodeList 类型的对象；
         selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串；
参数值：  String  必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。
		 多个选择器使用逗号(,)分隔。
返回值:   一个 NodeList 对象，表示文档中匹配指定 CSS 选择器的所有元素。 
		 NodeList 是一个静态的 NodeList 类型的对象。如果指定的选择器不合法，则抛出一个 SYNTAX_ERR 异常。

3、区别

getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合

eg1: 将 for 循环条件修改为 i < 3，结果在 ul 里新添加了3个元素，所有现在插入的 li 标签数量是6。

<body>
  <ul id="box">
    <li class="a">测试1</li>
    <li class="a">测试2</li>
    <li class="a">测试3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.getElementById('box');

  var list = ul.getElementsByTagName('li');
  for(var i = 0; i < 3; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length：',list.length);
</script>

在这里插入图片描述
eg2: 下述代码静态集合体现在 .querySelectorAll(‘li’) 获取到 ul 里所有 li 后，不管后续再动态添加了多少 li，都是不会对其参数影响。

<body>
  <ul id="box">
    <li class="a">测试1</li>
    <li class="a">测试2</li>
    <li class="a">测试3</li>
  </ul>
</body>

<script type="text/javascript">
  var ul = document.querySelector('ul');

  var list = ul.querySelectorAll('li');
  for(var i = 0; i < list.length; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6
</script>

前端~初学者

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中getElementById与querySelector区别

eg2: 下述代码静态集合体现在 .querySelectorAll(‘li’) 获取到 ul 里所有 li 后，不管后续再动态添加了多少 li，都是不会对其参数影响。eg1: 将 for 循环条件修改为 i < 3，结果在 ul 里新添加了3个元素，所有现在插入的 li 标签数量是6。getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合。
复制链接

扫一扫