从 HTML 片段中提取值属性

Question

我正在尝试value从 HTML 文件中提取属性。我曾经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>