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

时间:2011-06-07 15:40:21

标签: javascript getelementbyid

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

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

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

document.getElementByTokenId('14'); 

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

感谢。

7 个答案:

答案 0 :(得分:38)

在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库,正如其他人提到的那样。它隐藏了所有这些浏览器差异。

答案 1 :(得分:22)

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

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

=&GT;找到div

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

=&GT;找到值为

的div

答案 2 :(得分:4)

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

    $('div[tokenid=14]')

作为你的选择者。

答案 3 :(得分:1)

如果您愿意使用JQuery,那么:

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

答案 4 :(得分:1)

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

$('[tokenid=14]')

Here是一个例子的小提琴。

答案 5 :(得分:0)

使用此更稳定的功能:

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

答案 6 :(得分:0)

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

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