迹忆客 专注技术分享

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

在 JavaScript 中通过 Attribute 获取所有 DOM 元素

作者:迹忆客 最近更新:2022/11/22 浏览次数:

要通过属性获取所有 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 元素,例如 divspanp ,只要它具有 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 元素。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便