Question

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

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

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

document.getElementByTokenId('14');

这可能吗？如果是的话 - 任何提示都会受到高度赞赏。

感谢。

Answer 1

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

尽管如此，您可以编写自己的遍历树的函数，但与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的问题（一如既往;））。如果你做了很多这种元素检索，你真的应该考虑使用像jQuery这样的JavaScript库，正如其他人提到的那样。它隐藏了所有这些浏览器差异。

Answer 2

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

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

=＆GT;找到div

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

=＆GT;找到值为

的div

Answer 3

如果你正在使用jQuery，你可以使用它们的一些选择器魔术来做这样的事情：

    $('div[tokenid=14]')

作为你的选择者。

Answer 4

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

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

Answer 5

您可以使用JQuery完成此任务：

$('[tokenid=14]')

Here是一个例子的小提琴。

Answer 6

使用此更稳定的功能：

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;
};

Answer 7

使用普通JavaScript可以解决问题：

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

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

7 个答案: