JS中的querySelector方法详解|极客笔记

JS中的querySelector方法详解

在JavaScript中，我们经常会操作DOM元素，其中一个常见的操作就是选择元素。为了方便地选取元素，在现代Web开发中，我们通常会使用querySelector方法。本文将详细介绍querySelector方法的使用方法、参数和返回结果，并举例说明其实际应用。

querySelector方法概述

querySelector是Document对象和Element对象中的方法，用于在DOM树中查找元素。它接收一个CSS选择器作为参数，返回第一个匹配该选择器的元素，如果没有匹配的元素，则返回null。

querySelector方法的语法如下所示：

const element = document.querySelector(selectors);

其中，selectors为CSS选择器，可以是元素标签名、类名、ID名、属性选择器，甚至更复杂的选择器组合。

使用querySelector方法

选取元素标签名

如果想选取页面中第一个符合条件的元素，可以直接使用元素标签名作为选择器。例如：

const element = document.querySelector('div');

上述代码将返回页面中第一个div元素。如果想选取页面中第一个段落（p）元素，可以这样写：

const paragraph = document.querySelector('p');

选取类名

如果想选取具有特定类名的元素，可以在选择器前面加上.字符。例如，要选取类名为”container”的元素，可以这样写：

const container = document.querySelector('.container');

选取ID名

选取具有特定ID名的元素时，可以在选择器前面加上#字符。例如，选取ID名为”header”的元素，可以这样写：

const header = document.querySelector('#header');

选取属性

要选取具有特定属性的元素，可以使用属性选择器。例如，选取具有”data-active”属性的元素，可以这样写：

const element = document.querySelector('[data-active]');

组合选择器

querySelector方法还支持复杂的选择器组合，可以灵活地选择元素。例如，选取类名为”container”下面的第一个段落元素，可以这样写：

const paragraph = document.querySelector('.container p');

返回结果

querySelector方法返回一个Element对象，表示查询到的第一个匹配元素。如果没有找到匹配的元素，则返回null。我们可以对返回的元素进行操作，例如修改样式、添加事件监听器等。

下面是一个简单的示例，选取页面中ID为”header”的元素，并修改其文本内容：

<!DOCTYPE html>
<html>
<head>
    <title>querySelector示例</title>
</head>
<body>
    <h1 id="header">原始标题</h1>

    <script>
        const header = document.querySelector('#header');
        header.textContent = '修改后的标题';
    </script>
</body>
</html>

上述示例中，我们使用querySelector选取了ID为”header”的元素，并将其文本内容从”原始标题”修改为”修改后的标题”。