使用 JavaScript 通过自定义属性获取元素

Question

我有一个 XHTML 页面，其中每个 HTML 元素都有一个唯一的自定义属性，如下所示：

<div class="logo" tokenid="14"></div>

我需要一种通过 ID 查找此元素的方法，类似于 document.getElementById()，但不是使用通用的ID，我想使用自定义 "tokenid" 属性搜索元素。就像这样：

document.getElementByTokenId('14'); 

这可能吗？如果是的话 - 任何提示将不胜感激。

Answer 1

在 HTML 中使用自定义属性并不好。如果有的话，您应该使用 HTML5 的 data 属性 。

不过，您可以编写自己的函数来遍历树，但这与 getElementById 相比相当慢，因为您无法使用任何索引：

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }
    return null;
}

在最坏的情况下，这会遍历整棵树。想想如何改变你的观念，让你能尽可能的利用浏览器的功能。

在较新的浏览器中，您使用 querySelector 方法，它会在哪里：

var element = document.querySelector('[tokenid="14"]');

这也会快得多。

---

更新：请注意下面 @Andy E 的评论。您可能会遇到 IE 问题（一如既往；））。如果您进行大量此类元素检索，那么您确实应该考虑使用 JavaScript 库，例如 jQuery，正如其他人提到的那样。它隐藏了所有这些浏览器差异。

Answer 2

<div data-automation="something">
</div>

document.querySelector("div[data-automation]")

=>找到div

document.querySelector("div[data-automation='something']")

=>查找具有值的 div

Answer 3

如果您使用 jQuery，您可以使用它们的一些选择器魔法来执行以下操作：

    $('div[tokenid=14]')

作为您的选择器。

Answer 4

用普通的 JavaScript 来做这件事就可以了：

  const something = document.querySelectorAll('[data-something]')

Answer 5

您可以使用 JQuery 来完成此操作：

$('[tokenid=14]')

这里是一个小提琴示例。

Answer 6

如果您愿意使用 JQuery，那么：

var myElement = $('div[tokenid="14"]').get();

Answer 7

使用这个更稳定的函数：

function getElementsByAttribute(attr, value) {
  var match = [];
  /* Get the droids we are looking for*/
  var elements = document.getElementsByTagName("*");
  /* Loop through all elements */
  for (var ii = 0, ln = elements.length; ii < ln; ii++) {
    if (elements[ii].nodeType === 1){      
      if (elements[ii].name != null){        
      /* If a value was passed, make sure it matches the elements */
        if (value) {
          if (elements[ii].getAttribute(attr) === value) 
           match.push(elements[ii]);           
      } else {
        /* Else, simply push it */
         match.push(elements[ii]);          
      }
     }
   }
  }
return match;
};