从HTML代码段中提取value属性

Question

我正在尝试从HTML文件中提取value属性。我使用querySelectorAll来获取文件中的所有节点。有人能帮助我如何仅从文件中提取value属性吗。

const nodes = document.querySelectorAll("add")
console.log(nodes)

<div>
<add value="abc"></add>
<add value="def"></add>
<add value="ghi"></add>
</div>

Answer 1

请确保通过向查询中添加[value]来检查所选节点是否具有属性value。

注意：在这里，我使用ES6扩展运算符来获得NodeList作为数组。

const nodes = document.querySelectorAll("add[value]")
console.log([...nodes].map(n => n.getAttribute("value")))

<div>
<add value="abc"></add>
<add value="def"></add>
<add value="ghi"></add>
</div>

Answer 2

您可以将Array.prototype.map与Array.from:一起使用

const nodes = Array.from(document.querySelectorAll("add")).map(el => el.getAttribute('value'))
console.log(nodes)

<div>
<add value="abc"></add>
<add value="def"></add>
<add value="ghi"></add>
</div>

Answer 3

您可以在节点集合上进行映射，并在每个集合上调用getAttribute()：

const nodes = document.querySelectorAll('add');
const values = Array.from(nodes).map(node => node.getAttribute('value'));
console.log(values);

<div>
<add value="abc"></add>
<add value="def"></add>
<add value="ghi"></add>
</div>