我有一个XHTML页面,其中每个HTML元素都有一个唯一的自定义属性,如下所示:
<div class="logo" tokenid="14"></div>
我需要一种通过ID查找此元素的方法,类似于document.getElementById()
,但我不想使用常规ID,而是使用自定义"tokenid"
属性搜索元素。像这样:
document.getElementByTokenId('14');
这可能吗?如果是的话 - 任何提示都会受到高度赞赏。
感谢。
答案 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)
答案 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]')