純粋なjavascriptでHTML hidden属性を検出する方法

Question

私はanalyticsフィールドで作業しています。ほとんどの場合、私は問題を解決するためにCSSセレクタを使用しています。今私は<p>要素が隠されているかどうかを検出する必要があった私はウェブサイト上で働いています。ので、ここで二つの可能な状況である：

<p namehere hidden>This paragraph should be hidden.</p> 
<p namehere This paragraph should be hidden.</p> 

<p>要素の隠された状態に関するブール値を返すための最も簡単な方法は何ですか？

ありがとうございます！

Answer 1

あなたは、getElementsByTagName機能をすべてp要素をキャッチし、それらを反復し、指定された要素がhiddenがnullと異なる属性を持っているかどうかを確認できます。

注：hidden属性がnullの場合、要素には非表示属性がありません。

var elems = document.getElementsByTagName('p'); 
 
    Array.from(elems).forEach(function(v,i) { 
 
     if (v.getAttribute('hidden') == null) { 
 
     console.log(v); 
 
     } 
 
    });

<p namehere hidden>This paragraph should be hidden.</p> 
 
<p namehere>This paragraph should be hidden.</p>

Answer 2

あなたはjQueryを使って作業している場合は、直接hasClass機能を使用することができます。

Jquery hasClass

あなたは純粋なJavaScriptのを探しているなら、あなたはあなたがgetAttributeを探している

function hasClass(element, className) { 
return new RegExp(' ' + className + ' ').test(' ' + element.className + ' ');} 

Answer 3

この機能を使用することができます。この場合、getAttributeは、属性がない場合はnull、存在する場合は''を返します。

あなたはそうのようなタグを反復処理することができます

var paragraphs = document.getElementsByTagName("p"); 
 

 
for(var i = 0; i < paragraphs.length; i++){ 
 
    if(paragraphs[i].getAttribute("hidden") !== null){ 
 
    // The paragraph is hidden and can be accessed with paragraphs[i] 
 
    console.log(paragraphs[i].innerHTML + ' is hidden'); 
 
    } else { 
 
    // The paragraph not is hidden and can be accessed with paragraphs[i] 
 
    console.log(paragraphs[i].innerHTML + ' is not hidden'); 
 
    } 
 
}

<p>Paragraph 1</p> 
 
<p hidden>Paragraph 2</p> 
 
<p>Paragraph 3</p>