使用属性名获取 HTML 元素

在前端开发中，有时候需要动态地获取 HTML 元素。最常见的方式是使用元素的 ID 或 class 名称来获取，但是如果没有这些特征呢？此时，我们可以使用元素的属性名来获取它们。

document.querySelectorAll()

document.querySelectorAll() 是一个能够返回所有匹配指定选择器的文档中的元素列表的方法。它接受一个 CSS 选择器作为参数，并返回一组匹配的元素。我们可以使用 [] 运算符来使用元素的属性名称进行选择。

以下是一个示例，它将返回所有具有 data-role 属性的 <div> 元素：

let elements = document.querySelectorAll('div[data-role]');

上述代码通过 querySelectorAll() 方法从文档中选取了所有带有 data-role 属性的 <div> 元素并将其赋值给 elements 变量。

document.querySelector()

除了 querySelectorAll() 方法外，还有一个 document.querySelector() 方法也可以使用属性名称选择元素，只不过它只返回匹配到的第一个元素。

以下是一个示例，它将返回第一个具有 data-role 属性的 <div> 元素：

let element = document.querySelector('div[data-role]');

上述代码通过 querySelector() 方法从文档中选取了第一个带有 data-role 属性的 <div> 元素并将其赋值给 element 变量。

document.getElementsByTagName()

我们还可以使用 document.getElementsByTagName() 方法来选取一组元素，然后通过遍历这个数组并检查每个元素的属性名称来选择我们需要的元素。下面是一个获取具有 data-role 属性的所有 <div> 元素的示例：

let divs = document.getElementsByTagName('div');
let elements = [];

for (let i = 0; i < divs.length; i++) {
  if (divs[i].hasAttribute('data-role')) {
    elements.push(divs[i]);
  }
}

上述代码中，我们首先使用 getElementsByTagName() 方法获取了所有的 <div> 元素，并将它们存储在 divs 变量中。然后，我们迭代 divs 数组并检查每个元素是否具有 data-role 属性。如果有，我们就将这个元素添加到 elements 数组中。

结论

通过使用元素的属性名称，我们可以动态地选择 HTML 元素，即使它们没有 ID 或 class 名称。 querySelectorAll() 和 querySelector() 方法以及 getElementsByTagName() 方法都是非常有用的工具，可以帮助我们轻松选择特定的元素。

虽然这些方法可以解决大多数情况下的需求，但在某些特殊的场合下，可能需要使用更高级的方式来选择元素。不过，在大多数情况下，这些方法已经足够了。

希望本文能帮助您更好地理解如何使用属性名称选择 HTML 元素。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30624