通過使用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

回答

相關問題