Как получить 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 это не массив, а "массивоподобный", который поддерживает только несколько операций с массивами.