如何获得具有特定数据属性的html节点

How do I get an html node with a specific data attribute?

本文关键字：数据属性 html 节点 何获得      更新时间：2023-09-26

在javaScript中，如何获得一个特定的html节点的最佳方法是我知道属性名称和属性值，并且许多html节点可以具有相同的属性名称？属性名称是一个数据属性。

以下是一些示例html:

<div class="misc1" data-test="value1" data-test="value2"></div>
<div class="misc2" data-test="value3" data-test="value4"></div>

如果我想用data-test="value3"获得html节点，我需要做一些类似以下的事情吗：

  var elements = document.querySelectorAll("[data-test]");
  for (i = 0; i < elements.length; i++) {
    for(x = 0; x < elements[i].attributes.length; x++) {
        //Do an attribute value check??
    }
  }

我可以在代码方面得到一些帮助吗？我不想使用jQuery？

您的属性选择器可以更具体，如下所示：

var elements = document.querySelectorAll('[data-test="value3"]');

属性选择器还有多种其他变体：

  • [attr]表示属性名称为attr的元素
  • [attr=value]表示属性名称为attr且其值恰好为"value"的元素
  • [attr~=value]表示属性名称为attr的元素，该元素的值是以空格分隔的单词列表，其中一个为确切地说是"价值"
  • [attr|=value]表示属性名称为attr的元素。它的值可以是"value"，也可以以"value"开头紧随其后的是"-"（U+002D）。它可以用于语言子代码匹配
  • [attr^=value]表示属性名称为attr且其值以"value"为前缀的元素
  • [attr$=value]表示属性名称为attr的元素，其值以"value"作为后缀
  • [attr*=value]表示属性名称为attr的元素，其值至少包含一个字符串"value"作为子字符串
  • [attr operator value i]在右括号前添加i会导致对值进行不区分大小写的比较（对于字符在ASCII范围内）
相关文章：