如何从特定的 CSS 选择器中获取值列表
How to get a list of values from a specific CSS Selector
我想立即从特定 CSS 选择器中检索值列表。
我只想提取 <strong>
中的文本。我正在使用:
document.querySelectorAll("p > strong")
但是我得到了一个节点列表...
NodeList(101) [strong, strong, strong, strong, strong, strong, strong, strong, strong,...]
我将 innerText 定位为:
document.querySelectorAll("p > strong")[1].innerText
如何一次提取列表中的所有目标文本值?
使用spread operator
to turn it into an array and then use the map
方法获取所需内容。
var array = [...document.querySelectorAll("p > strong")].map(a=>a.innerText);
console.log(array);
<p><strong>I</strong></p>
<p><strong>heart</strong></p>
<p><strong>To</strong></p>
<p><strong>Fart</strong></p>
如果你遍历你拥有的 nodeList,你的代码就可以工作
虽然我使用 textContent - 同样的东西但更标准
const strong = document.querySelectorAll("p > strong")
const texts = []
for (let i = 0; i< strong.length;i++) texts.push(strong[i].textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
或者使用 spread syntax
在投射到数组后映射节点列表,但速度较慢(如果重要的话)
const texts = [...document.querySelectorAll("p > strong")]
.map(({textContent}) => textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
jQuery 如果你需要
const texts = $("p strong").map((_,e) => e.textContent).get();
console.log(texts)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
我想立即从特定 CSS 选择器中检索值列表。
我只想提取 <strong>
中的文本。我正在使用:
document.querySelectorAll("p > strong")
但是我得到了一个节点列表...
NodeList(101) [strong, strong, strong, strong, strong, strong, strong, strong, strong,...]
我将 innerText 定位为:
document.querySelectorAll("p > strong")[1].innerText
如何一次提取列表中的所有目标文本值?
使用spread operator
to turn it into an array and then use the map
方法获取所需内容。
var array = [...document.querySelectorAll("p > strong")].map(a=>a.innerText);
console.log(array);
<p><strong>I</strong></p>
<p><strong>heart</strong></p>
<p><strong>To</strong></p>
<p><strong>Fart</strong></p>
如果你遍历你拥有的 nodeList,你的代码就可以工作
虽然我使用 textContent - 同样的东西但更标准
const strong = document.querySelectorAll("p > strong")
const texts = []
for (let i = 0; i< strong.length;i++) texts.push(strong[i].textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
或者使用 spread syntax
在投射到数组后映射节点列表,但速度较慢(如果重要的话)const texts = [...document.querySelectorAll("p > strong")]
.map(({textContent}) => textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
jQuery 如果你需要
const texts = $("p strong").map((_,e) => e.textContent).get();
console.log(texts)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>