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不是数组而是“类似数组的”，它仅支持一些数组操作。

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

1 个答案: