属性値に基づいてDOM内の要素を検索する

指定された属性名と属性値を持つ要素を検索するDOM APIがあるかどうか教えてください。

何かのようなもの：

doc.findElementByAttribute("myAttribute", "aValue");

更新：過去数年間で状況は劇的に変化しました。これで確実に使用することができますquerySelectorとquerySelectorAll、ご覧Wojtekさんの答えこれを行う方法のために。

現在、jQueryの依存関係は必要ありません。jQueryを使用している場合、素晴らしい...使用していない場合は、属性による要素の選択だけに依存する必要はありません。

これをバニラJavaScriptで行うための非常に短い方法はありませんが、いくつかの解決策があります。

要素をループして属性を確認するこのようなことをします

jQueryのようなライブラリがオプションの場合は、次のように少し簡単にできます。

$("[myAttribute=value]")

値が有効なCSS識別子ではない（スペースや句読点が含まれているなど）場合は、値を引用符で囲む必要があります（単一または二重にすることができます）。

$("[myAttribute='my value']")

あなたも行うことができstart-with、ends-with、contains、等... 属性セレクタのためのいくつかのオプションがあります。

最新のブラウザーはネイティブをサポートしているquerySelectorAllため、次のことができます。

document.querySelectorAll('[data-foo="value"]');

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

ブラウザの互換性の詳細：

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

jQueryを使用して、廃止されたブラウザー（IE9以前）をサポートできます。

$('[data-foo="value"]');

DOMで属性セレクターを使用するには、 document.querySelector()document.querySelectorAll()メソッドとメソッド。

あなたのために：

document.querySelector("selector[myAttribute='aValue']");

とを使用して querySlectorAll()：

document.querySelectorAll("selector[myAttribute='aValue']");

に querySelector()してquerySelectorAll()私たちは、「CSS」で選択した方法我々は、オブジェクトを選択することができます。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectorsの「CSS」属性セレクターの詳細

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

ps正確な要素タイプがわかっている場合は、3番目のパラメーター（つまりdiv, a, p ...etc...）を追加します。

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

しかし、最初にこの関数を定義します：

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

コメントごとの推奨事項ごとに更新されたps。

次に、src属性でドキュメント内の画像を検索する方法の例を示します。

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

getAttributeを使用できます。

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

クエリセレクタ、例を使用します。

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]nameプロパティを持つ要素を入力します。

[id|=view] 次で始まるIDを持つ要素 view-。

[class~=button]buttonクラスを持つ要素。