从 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>&nbsp; <add value="abc"></add>&nbsp; <add value="def"></add>&nbsp; <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>&nbsp; <add value="abc"></add>&nbsp; <add value="def"></add>&nbsp; <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>&nbsp; <add value="abc"></add>&nbsp; <add value="def"></add>&nbsp; <add value="ghi"></add></div>