从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>