通过使用JavaScript

我有每个HTML元素具有独特的自定义属性的XHTML页面，这样的自定义属性获取元素：通过使用JavaScript

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

我需要一种方法来找到ID这个元素，类似于document.getElementById() ，但不是使用一般ID，而是使用我的自定义"tokenid"属性搜索元素。像这样：

document.getElementByTokenId('14');

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

谢谢。

来源

2011-06-07 cycero

在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的评论。这可能是你碰到IE的问题（一如既往））。如果你做了很多这种元素检索，你应该考虑使用像jQuery这样的JavaScript库，就像其他人提到的一样。它隐藏了所有这些浏览器差异。

来源

2011-06-07 15:50:01

+1的辛勤工作，但请记住，'children'具有 2011-06-07 16:05:37

@安迪：呃，我不知道这些问题......谢谢！我会把它作为练习给读者尽管;） – 2011-06-07 16:08:16

我不怪你:-) – 2011-06-07 16:09:16

如果你愿意使用JQuery，则：

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

来源

2011-06-07 15:44:18 sje397

您可以用jQuery做到这一点：

$('[tokenid=14]')

Here的一个例子小提琴。

来源

2011-06-07 15:45:20 Briguy37

如果你使用jQuery，您可以使用一些自己选择的魔法做这样的事情：

$('div[tokenid=14]')

为您的选择。

来源

2011-06-07 15:45:43 Thurloat

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

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

=>找到DIV

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

=>找到一个值

来源

2015-01-16 07:02:12 user1307434

使用此较稳定的功能股利：

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

来源

2016-02-03 22:16:18 Ingo

通过使用JavaScript

回答

相关问题