web-dev-qa-db-ja.com

JavaScriptを使用してカスタム属性で要素を取得する

次のように、各HTML要素に一意のカスタム属性があるXHTMLページがあります。

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

document.getElementById()と同様に、IDでこの要素を見つける方法が必要ですが、一般的なIDを使用する代わりに、カスタム_"tokenid"_属性を使用して要素を検索します。このようなもの：

_document.getElementByTokenId('14'); 
_

それは可能ですか？はいの場合-ヒントは大歓迎です。

ありがとう。

javascriptgetelementbyid
34
cycero

HTMLでカスタム属性を使用するのは良くありません。ある場合は、 HTML5のdata属性 を使用する必要があります。

それにもかかわらず、ツリーを横断する独自の関数を書くことができますが、それはgetElementByIdと比較してquite slowになります任意のインデックス：

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ライブラリの使用を検討する必要があります。これらのブラウザーの違いをすべて隠します。

39
Felix Kling
<div data-automation="something">
</div>

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

=> divを見つけます

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

=>値を持つdivを見つける

23
user1307434

JQueryを使用している場合は、セレクターマジックを使用して次のようなことができます。

    $('div[tokenid=14]')

セレクターとして。

4
Thurloat

JQuery を使用したい場合：

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

JQueryでこれを実現できます。

$('[tokenid=14]')

ここ は例のためのフィドルです。

1
Briguy37

このより安定した機能を使用します。

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