使用 JavaScript 按内容查找元素

作者

使用 JavaScript 按内容查找元素

Find Element by Content using JavaScript

按内容查找元素：

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

这是文章中示例的 html。

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

  <body>
    <div>Hello world</div>
    <div>One two three</div>
    <div>Apple banana kiwi</div>

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

这是相关的 JavaScript 代码。

索引.js
const text = 'Hello world';

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包含所有标记为 的 DOM 元素的
div。

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

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

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

索引.js
const text = 'HELLO WORLD';

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 元素：

  1. 使用该document.querySelectorAll方法按标签选择元素。
  2. 使用 方法将结果转换为数组Array.from。
  3. 使用该find()方法遍历数组。
  4. 在每次迭代中，检查元素的内容是否包含该字符串。
索引.js
const text = 'Hello world';

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和要检查的字符串转换为小写。

索引.js
const text = 'Hello world';

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

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

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

通过将我们要比较的两个字符串都转换为小写，我们能够进行不区分大小写的比较。

–

发表评论