Javascript。通过咏叹调标签获取所有元素

Question

嘿，即时通讯尝试让页面上的每个元素都有一个包含/以“i_”开头的咏叹调标签。我也需要在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

可以使用document.querySelector [全部]的方法来找到你的CSS元素。用CSS你可以按属性过滤。 *[aria-label^="value"]将选择任何具有以“value”开头的aria标签的元素。

代码：

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

Answer 3

在CSS中，你可以使用[attribute^=value]格式：

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

在JavaScript中，只要使用同一件事：

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

这应该返回所有具有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>