使用 JavaScript 按内容查找元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 按内容查找元素

作者：迹忆客最近更新：2022/10/26 浏览次数：

按内容查找元素：

使用 document.querySelectorAll 方法按标签选择 DOM 元素。
使用 for...of 循环遍历集合。
在每次迭代中，检查元素的 textContent 是否与预期内容匹配。

这是文章中示例的 html。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>Hello 迹忆客(jiyik.com)</div>
    <div>One two three</div>
    <div>Apple banana kiwi</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

index.js

const text = 'Hello 迹忆客(jiyik.com)';

const matches = [];

for (const div of document.querySelectorAll('div')) {
  if (div.textContent.includes(text)) {
    matches.push(div);
  }
}

console.log(matches); // 👉️ [div.box]

此代码示例查找内容包含特定字符串的所有 DOM 元素。如果您只需要查找与条件匹配的单个 DOM 元素，请向下滚动到使用 find() 方法的示例。

我们使用 document.querySelectorAll 方法来获取一个 NodeList，其中包含所有具有 div 标签的 DOM 元素。

下一步是使用 for...of 循环遍历 NodeList。

在每次迭代中，我们检查元素的 textContent 是否包含预期的文本。如果有匹配，我们将元素推送到匹配数组中。

如果我们想在检查 DOM 元素的内容是否包含特定字符串时忽略大小写，请将两个字符串都转换为小写。

const text = 'HELLO 迹忆客(JIYIK.COM)';

const matches = [];

for (const div of document.querySelectorAll('div')) {
  if (div.textContent.toLowerCase().includes(text.toLowerCase())) {
    matches.push(div);
  }
}

console.log(matches); // 👉️ [div.box]

通过将元素的 textContent 和我们要查找的文本转换为小写，我们可以进行不区分大小写的检查。

因为 for...of 循环遍历 NodeList 中的所有元素，所以如果您只需要与条件匹配的第一个元素，这种方法将效率低下。

要查找其内容包含特定字符串的第一个 DOM 元素：

使用 document.querySelectorAll 方法按标签选择元素。
使用 Array.from 方法将结果转换为数组。
使用 find() 方法遍历数组。
在每次迭代中，检查元素的内容是否包含字符串。

const text = 'Hello 迹忆客(jiyik.com)';

const elements = Array.from(document.querySelectorAll('div'));

const match = elements.find(el => {
  return el.textContent.includes(text);
});

console.log(match); // 👉️ div.box

我们传递给 Array.find 方法的函数会为数组中的每个元素调用，直到它返回一个真值或耗尽数组中的元素。

如果回调函数返回真值，则 find() 方法短路并返回相应的数组元素。

如果条件从未满足，则 find 方法返回 undefined。

如果要对元素是否包含特定字符串进行不区分大小写的检查，请将元素的 textContent 和要检查的字符串转换为小写。

const text = 'Hello 迹忆客(jiyik.com)';

const elements = Array.from(document.querySelectorAll('div'));

const match = elements.find(el => {
  return el.textContent.toLowerCase().includes(text.toLowerCase());
});

console.log(match); // 👉️ div.box