📌  相关文章
📜  queryselector 获取每个元素 (1)

📅  最后修改于: 2023-12-03 15:04:44.701000             🧑  作者: Mango

使用 querySelector 获取每个元素

在网页开发过程中，我们常常需要获取 DOM（文档对象模型） 里的元素，以便对其进行操作。获取元素主要可以通过两种方式，一种是使用 ID（getElementById()），另一种是使用 CSS 选择器（querySelector() 和 querySelectorAll() ）。

querySelector

querySelector 用于获取符合指定 CSS 选择器的第一个元素。

语法
element = document.querySelector(selector);

参数说明：

  • element: 返回被选定元素，如果没有找到匹配的元素，则返回 null。
  • selector: 一个 CSS 选择器，用于指定要选取的元素。
示例
<!DOCTYPE html>
<html>
<head>
<title>querySelector 示例</title>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
<p>这是另一段文本。</p>

<script>
var firstP = document.querySelector('p');
console.log(firstP);
</script>

</body>
</html>

上面的代码将获取第一个 p 元素，并将其输出到控制台中。结果如下所示：

<p>这是一段文本。</p>
querySelectorAll

querySelectorAll 用于获取符合指定 CSS 选择器的所有元素。

语法
elementList = document.querySelectorAll(selector);

参数说明:

  • elementList: 一个 NodeList 对象，包含了匹配选择器的所有元素。
  • selector: 一个 CSS 选择器，用于指定要选取的元素。
示例
<!DOCTYPE html>
<html>
<head>
<title>querySelectorAll 示例</title>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
<p>这是另一段文本。</p>

<script>
var allP = document.querySelectorAll('p');
console.log(allP);
</script>

</body>
</html>

上面的代码将获取所有的 p 元素，并将其输出到控制台中。结果如下所示：

NodeList [ <p>这是一段文本。</p>, <p>这是另一段文本。</p> ]
总结

querySeletor 和 querySelectorAll 方法是获取 DOM 元素的一种简单而强大的方式。可以使用 CSS 选择器来筛选需要获取的元素，使代码更加简洁易懂。当需要获取单个元素时，使用 querySelector 方法，需要获取多个元素时，使用 querySelectorAll 方法。