元素获取方法对比表（后两种常用）

方法

返回值类型

动态 / 静态

适用场景

getElementById()

单个元素

-

已知 ID 时快速定位

getElementsByClassName()

HTMLCollection

动态

按类名批量获取元素

getElementsByTagName()

HTMLCollection

动态

按标签名批量获取元素

querySelector()

单个元素

-

复杂选择器匹配第一个元素

querySelectorAll()

NodeList

静态

复杂选择器匹配所有元素

通过选择器获取：querySelector()与querySelectorAll()

  • 特点：
  • querySelector()：返回匹配指定 CSS 选择器的第一个元素。
  • querySelectorAll()：返回匹配指定 CSS 选择器的所有元素（NodeList），是静态集合（元素变化时不会自动更新）。
  • 语法：




    javascript


document.querySelector("选择器"); // 单个元素
document.querySelectorAll("选择器"); // 元素集合
  • 示例：




    html


<div class="box"><p class="text">文本1</p><p class="text">文本2</p>
</div>
<script>// 获取第一个class为text的p元素const firstText = document.querySelector(".box .text");console.log(firstText); // <p class="text">文本1</p>// 获取所有class为text的p元素const allTexts = document.querySelectorAll(".box .text");console.log(allTexts.length); // 2
</script>
  • 优势：支持复杂选择器（如div > p、[data-id="1"]），灵活性极高，是现代开发中最常用的方法。