2

假设我有以下 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？

4

1 回答 1

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，例如，是必需的，因为 aNodeList不是数组而是“类数组”，它只支持少数数组操作。

于 2018-08-21T13:55:03.693 回答