Javascript。 aria-labelですべての要素を取得する

Question

「i_」を含む/開始するariaラベルを持つページ上のすべての要素を取得しようとしています。私もjavascriptでこれを行う必要があります。

おかげ

Answer 1

キャッチ指定されたすべての要素は、それらを反復し、それがaria-label属性がi_で始まるのですかどうかを確認します。もしそうなら - 新しく作られたarrにそれを押し込みます。

var elems = document.getElementsByClassName('elem'); 
 
var arr = []; 
 

 
Array.from(elems).forEach(v => v.getAttribute('aria-label').startsWith('i_') ? arr.push(v) : v); 
 

 
console.log(arr);

<div aria-label='i_one' class='elem'></div> 
 
<div aria-label='i_two' class='elem'></div> 
 
<div aria-label='three' class='elem'></div>

Answer 2

あなたはCSSであなたの要素を見つけることがdocument.querySelector [すべて]メソッドを使用することができます。 CSSを使用すると、属性別にフィルタリングできます。 *[aria-label^="value"]は、 "値"で始まる値のアリアラベルを持つ要素を選択します。

コード：CSSで

const node = document.querySelector('*[aria-label^="containing"]'); 

Answer 3

、あなたが[attribute^=value]の形式を使用します：

document.querySelectorAll("[aria-label^='i_']"); 

返す必要があります：ちょうど同じことを使用し、JavaScriptで

[aria-label^="i_"] { 
    background: #55ff55; 
} 

をaria-labelの値がで始まるすべての要素の配列のようなリスト。ここで

は、それらの両方を持つ例を示します

var x = document.querySelectorAll("[aria-label^='i_']"); 
 
// 'x' contains all of the <p> elements that have "i_" in the start

[aria-label^="i_"] { 
 
    background: #55ff55; 
 
}

<p aria-label="i_foo"> Giraffes have black tongues to protect them from getting sunburnt </p> 
 
<p aria-label="i_bar"> Coral colonies can live up to centuries old </p> 
 
<p aria-label="m_foo"> The moon is a planet </p> 
 
<p aria-label="i_gaw"> Ostriches' eyes are larger than their brains </p>