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

要通过属性获取所有 DOM 元素,请使用 querySelectorAll() 方法,例如 document.querySelectorAll(‘[class=”box”]’)。 querySelectorAll() 方法返回一个 NodeList,其中包含与指定选择器匹配的元素。

这是此示例的 html 代码。

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

在第三个示例中,我们获取了所有设置了 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 方法,该选择器与值以特定字符串开头、结尾或包含特定字符串的属性匹配。

第二个示例选择类属性的值以 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 元素。