javascript - JavascriptはLIタグの要素を取得します

Question

次liのようなものがあります：

<li temp="true">HELLO</li>

JSで「HELLO」を操作できるように「temp」を取得するにはどうすればよいですか... IDまたはclassNameで方法を知っています

Answer 1

サポートしているブラウザー (つまり、古い IE 以外のもの) では:

var li = document.querySelector("li[temp=true]");

古い IE のサポートが必要な場合は、次を試してください。

var li = document.querySelector ? document.querySelector("li[temp=true]")
  : (function() {
      var lis = document.getElementsByTagName('li'), l = lis.length, i;
      for( i=0; i<l; i++) {
          if( lis[i].getAttribute("temp") == "true") return lis[i];
      }
      return false;
  })();

Answer 2

jQuery では、属性セレクターを使用できます。

$('li[temp="true"]');

document.querySelectorAll()または、ネイティブ JS ソリューションのメソッドを使用できます。ただし、これによるクロスブラウザーへの影響に注意する必要があります。

var ele = document.querySelectorAll('li[temp="true"]');

上記のjsFiddle Demoを見ることができます。

余談ですが、data-属性を使用してカスタム属性を HTML 要素に格納する必要があります。たとえば、正しい構文は次のようになります。

<li data-temp="true">HELLO</li>

Answer 3

すべての li を反復処理します。

var li = document.getElementsByTagName("li");
var found;
for(var i=0; i< li.length;i++){

    if(li[i].getAttribute("temp") == "true"){
       found = li[i]; break;
   }
}

console.log(found);

またはネイティブクエリを使用できます

var found= document.querySelectorAll('li[temp="true"]');

JSFiddle