使用 JavaScript 按内容查找元素

按内容查找元素:

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

这是文章中示例的 html。

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

  <body>
    <div>Hello 火焰兔(zadmei.com)</div>
    <div>One two three</div>
    <div>Apple banana kiwi</div>

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

这是相关的 JavaScript 代码。

const text = 'Hello 火焰兔(zadmei.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 火焰兔(ZADMEI.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 元素:

  1. 使用 document.querySelectorAll 方法按标签选择元素。
  2. 使用 Array.from 方法将结果转换为数组。
  3. 使用 find() 方法遍历数组。
  4. 在每次迭代中,检查元素的内容是否包含字符串。
const text = 'Hello 火焰兔(zadmei.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 火焰兔(zadmei.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

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