HTML DOM 元素 querySelector() 方法

在 web 前端开发中，我们经常需要操作页面上的 DOM 元素，以实现各种功能。而要选择特定的 DOM 元素，我们可以使用 querySelector() 方法。这个方法可以帮助我们通过 CSS 选择器来快速定位到我们需要的元素。

querySelector() 方法的基本语法

var element = document.querySelector(selector);

• selector 是一个字符串，表示要选择的元素的 CSS 选择器。

querySelector() 方法的用法

选择单个元素

使用 querySelector() 方法可以选择页面上匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，则返回 null。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector() 示例</title>
</head>
<body>
<div id="container">
    <p class="text">Hello, World!</p>
</div>

<script>
var element = document.querySelector('.text');
console.log(element.innerText); // 输出：Hello, World!
</script>
</body>
</html>

在上面的示例中，我们使用 querySelector() 方法选择了 class 为 "text" 的元素，并输出了其文本内容。

选择多个元素

如果我们需要选择多个匹配的元素，可以使用 querySelectorAll() 方法。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelectorAll() 示例</title>
</head>
<body>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

<script>
var elements = document.querySelectorAll('li');
elements.forEach(function(element) {
    console.log(element.innerText);
});
</script>
</body>
</html>

在上面的示例中，我们使用 querySelectorAll() 方法选择了所有的 <li> 元素，并输出了它们的文本内容。

总结

通过 querySelector() 方法，我们可以方便地选择页面上的 DOM 元素，从而实现各种功能。在实际开发中，熟练掌握这个方法可以提高我们的开发效率。希望本文对你有所帮助！