如何获取节点列表中每个元素的 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 也 returns 和 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 不是数组而是 "array-like"，它仅支持少数数组操作。

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

How to get innerHTML of each element in a node list

dom

nodelist

reason

bucklescript

bs-webapi