在 JavaScript 中通过 Attribute 获取所有 DOM 元素
要通过属性获取所有 DOM 元素，请使用 querySelectorAll() 方法，例如 document.querySelectorAll('[class="box"]')。 querySelectorAll() 方法返回一个 NodeList，其中包含与指定选择器匹配的元素。
这是此示例的 html 代码。
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <!-- ✅ Your JS script here ✅ --> <script src="index.js"></script> </body> </html>
这是相关的 JavaScript 代码。
index.js// ✅ Get all where specific "attribute = value" const elements1 = document.querySelectorAll(`[class="box"]`); console.log(elements1); // 👉️ [div.box, div.box, div.box] // ✅ Get only DIVs where specific "attribute = value" const elements2 = document.querySelectorAll(`div[class="box"]`); console.log(elements2); // 👉️ [div.box, div.box, div.box] // ✅ Get all DIVs where specific attribute is set to any value const elements3 = document.querySelectorAll('div[class]'); console.log(elements3); // 👉️ [div.box, div.box, div.box] // ✅ Get all elements where specific attribute is set to any value const elements4 = document.querySelectorAll('[class]'); console.log(elements4); // 👉️ [div.box, div.box, div.box]
我们将不同的选择器传递给 document.querySelectorAll() 方法以获取包含特定 DOM 元素的 NodeList。
请注意，querySelectorAll()方法返回一个 NodeList，而不是一个数组。 如果您需要将响应转换为数组，请将其传递给Array.from方法。
const arr = Array.from(document.querySelectorAll(`[class="box"]`));
第一个示例展示了如何获取所有 class 属性设置为 box 的 DOM 元素。
const elements1 = document.querySelectorAll(`[class="box"]`);
属性值必须完全匹配才能满足条件，例如 它不能是盒子蓝色，它必须只是盒子。
要根据特定属性值的部分匹配来选择元素，请向下滚动到下一个子标题。
在第二个示例中，我们更具体地获取了所有 class 属性等于 box 的 div 元素。
const elements2 = document.querySelectorAll(`div[class="box"]`);
这不会匹配任何将其 class 属性设置为 box 的 span 或 p 元素。
属性的值必须在引号中，并且在字符串内容中交替引号非常棘手。 如果您不关闭内部引号，我们将得到一个空的 NodeList 作为来自
querySelectorAll的响应。
在第三个示例中，我们获取了所有设置了 class 属性的 div 元素。
const elements3 = document.querySelectorAll('div[class]');
只要 div 元素设置了 class 属性，即使该属性没有值，它也会被选中并包含在 querySelectorAll 的返回值中。
第四个示例展示了如何获取所有设置了 class 属性的 DOM 元素。
const elements4 = document.querySelectorAll('[class]');
这可以是任何 DOM 元素，例如 div 、span 或 p ，只要它具有 class 属性集。
通过属性的部分匹配获取所有 DOM 元素
要通过部分匹配属性来获取所有 DOM 元素，请使用带有选择器的 querySelectorAll 方法，该选择器与值以特定字符串开头、结尾或包含特定字符串的属性匹配。
index.js// ✅ Get all where value of class starts with `bo` const elements1 = document.querySelectorAll(`[class^="bo"]`); console.log(elements1); // 👉️ [div.box, div.box, div.box] // ✅ Get all where value of class ends with `ox` const elements2 = document.querySelectorAll(`[class$="ox"]`); console.log(elements2); // 👉️ [div.box, div.box, div.box] // ✅ Get all where value of class contains `box` const elements3 = document.querySelectorAll(`[class*="box"]`); console.log(elements3); // 👉️ [div.box, div.box, div.box]
第一个示例选择 class 属性值以 bo 开头的所有 DOM 元素。
const elements1 = document.querySelectorAll(`[class^="bo"]`);
我们可能熟悉插入符号
^符号，它与正则表达式一起使用时具有相同的含义。
第二个示例选择类属性的值以 ox 结尾的所有 DOM 元素。
const elements2 = document.querySelectorAll(`[class$="ox"]`);
第三个示例选择所有 DOM 元素，其中 class 属性的值包含字符串框。
const elements3 = document.querySelectorAll(`[class*="box"]`);
字符串 box 可以位于要满足条件的类属性值中的任何位置。
请注意，我们还可以在选择器前面加上要匹配的特定类型的元素，以缩小结果范围。
const elements1 = document.querySelectorAll(`div[class^="bo"]`);
上面的示例仅选择具有 class 属性集且属性值以 bo 开头的 div 元素。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
