dom - 如何获取节点列表中每个元素的 innerHTML

Question

假设我有以下 html:

<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>

我想记录每个元素的 innerHTML。我尝试了以下方法:

document
|> Document.querySelectorAll(".item")
|> NodeList.toArray /* not sure if this is needed */
|> Array.map(Document.ofNode) /* not sure if this is needed */
|> Array.map(Element.innerHTML)
|> Array.iter((number) => {
  Js.log(number);
});

错误在行 |> Array.map(Element.innerHTML)

错误是:

This has type:
    array(Webapi.Dom.Element.t) => array(string)
  But somewhere wanted:
    array(Dom.node) => 'a

如何使用 Dom.node 访问 innerHTML？

Answer 1

Document.ofNode 应该是 Element.ofNode，但错误消息表明该行根本不存在于产生错误的代码中。 ofNode 还返回一个 option，因为并非所有节点都是元素，因此您也必须将其展开。这样的事情应该有效:

document
|> Document.querySelectorAll(".item")
|> NodeList.toArray
|> Array.map(Element.ofNode)
|> Array.map(Js.Option.getExn)
|> Array.map(Element.innerHTML)
|> Array.iter(Js.log);

或者为了避免一些不必要的数组分配和映射:

document
|> Document.querySelectorAll(".item")
|> NodeList.toArray
|> Array.iter(node =>
   node
   |> Element.ofNode
   |> Js.Option.getExn
   |> Element.innerHTML
   |> Js.log
  );

还必须指出，直接 DOM 操作不适合 Reason 或任何静态类型的函数式语言，因为 DOM 本质上是一个非常动态类型和面向对象的 API。例如，NodeList.toArray 是必需的，因为 NodeList 不是数组而是“类数组”，它仅支持少数数组操作。