getElementById和querySelector的区别

最新推荐文章于 2024-01-05 15:02:25 发布

尖尖啊

最新推荐文章于 2024-01-05 15:02:25 发布

阅读量564

点赞数

分类专栏： web apis 文章标签： javascript es6 css html5 json

本文链接：https://blog.csdn.net/shymartin/article/details/134878760

版权

web apis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

getElementById() 和 querySelector() 都是用于在 HTML 文档中选择元素的方法，但它们有一些区别：

getElementById():

语法： document.getElementById('elementId')
作用： 通过元素的 id 属性选择指定的元素。
返回值： 返回具有指定 id 的唯一元素，如果没有匹配的元素，则返回 null。
使用限制： 仅能根据元素的 id 属性选择元素，因为在 HTML 文档中，id 属性是唯一的，每个元素都应该有唯一的 id。返回的是一个单一的元素对象。

querySelector():

语法： document.querySelector('selector')
作用： 使用 CSS 选择器语法选择元素，可以选择类似 CSS 选择器的任何元素。
返回值： 返回匹配指定 CSS 选择器的第一个元素，如果没有匹配的元素，则返回 null。
使用限制： 可以使用更灵活的选择器语法，如类名（.class）、标签名（tag）、属性选择器（[attr=value]）等，也支持复合选择器。返回的是一个单一的元素对象。

主要区别：

选择器语法不同： getElementById() 使用的是纯粹的 id 名称，而 querySelector() 使用的是 CSS 选择器语法，更加灵活，可以选择更多种类的元素。
返回值不同： getElementById() 返回一个具有指定 id 的唯一元素，而 querySelector() 返回匹配的第一个元素，如果有多个匹配，则仅返回第一个。

<!DOCTYPE html>
<html>
<head>
  <title>getElementById 和 querySelector 示例</title>
</head>
<body>
  <div id="myDiv">
    <p class="paragraph">第一个段落</p>
    <p class="paragraph">第二个段落</p>
    <p class="paragraph">第三个段落</p>
  </div>

  <script>
    // 使用 getElementById() 获取具有 id 为 'myDiv' 的元素
    const myDivElement = document.getElementById('myDiv');
    console.log('通过 getElementById 获取的元素：', myDivElement);

    // 使用 querySelector() 获取第一个具有类名为 'paragraph' 的段落元素
    const firstParagraph = document.querySelector('.paragraph');
    console.log('通过 querySelector 获取的元素：', firstParagraph);
  </script>
</body>
</html>

HTML 结构：
- 有一个包含三个段落元素 <p> 的 <div> 元素。
- 每个段落都有一个类名为 'paragraph'。
JavaScript 部分：
- document.getElementById('myDiv') 选择了具有 id 为 'myDiv' 的 <div> 元素，并将其存储在 myDivElement 变量中。
- document.querySelector('.paragraph') 选择了文档中第一个具有类名为 'paragraph' 的元素，并将其存储在 firstParagraph 变量中。