我有一个 XHTML 页面，其中每个 HTML 元素都有一个唯一的自定义属性，如下所示：
<div class="logo" tokenid="14"></div>
我需要一种通过 ID 查找此元素的方法，类似于document.getElementById()，但我想使用自定义"tokenid"属性搜索该元素，而不是使用通用 ID 。像这样的东西：
document.getElementByTokenId('14');
那可能吗？如果是 - 任何提示将不胜感激。
谢谢。
使用 JavaScript 通过自定义属性获取元素
IT技术
javascript
getelementbyid
2021-03-15 16:43:30
6个回答
在 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，正如其他人提到的那样。它隐藏了所有这些浏览器差异。
<div data-automation="something">
</div>
document.querySelector("div[data-automation]")
=> 找到 div
document.querySelector("div[data-automation='something']")
=> 找到具有值的 div
如果你使用 jQuery，你可以使用他们的一些选择器魔法来做这样的事情：
$('div[tokenid=14]')
作为您的选择器。
如果您愿意使用JQuery，那么：
var myElement = $('div[tokenid="14"]').get();
其它你可能感兴趣的问题