使用 Elm.Browser.Dom 按类名获取元素

Posted 2023-03-16

【中文标题】使用 Elm.Browser.Dom 按类名获取元素

【英文标题】：Get elements by class name with Elm.Browser.Dom

【发布时间】：2020-10-30 07:52:12

【问题描述】：

我知道我可以通过带有Browser.Dom.getElement 的ID 获得Element。

但是我怎样才能通过类名获得List Element？

【问题讨论】：

您能否描述一下为什么需要该功能，您要解决的实际问题是什么？通常有比查询 DOM 更好的方法来解决 UI 场景。也许通过对状态进行建模，使得不需要 DOM 查询。

【参考方案1】：

从 Elm 0.19 开始，browser 包不公开任何其他帮助函数来查询 DOM。 getElement function itself is directly calling a kernel function：

getElement : String -> Task Error Element
getElement =
    Elm.Kernel.Browser.getElement

根据您要具体执行的操作，您可能需要编写一个 javascript 函数来查询元素、读取有趣的位并通过 the ports system 使您的 Elm 应用程序可以访问结果。

例如，查看elm-dom-ports package 以获得灵感。它将document.querySelectorAll() 函数作为端口公开，您可以通过订阅querySelectorAllResponse 来捕获其结果。