时间戳

首页 > 解决方案 > 使用 PureScript 从 div 中清除所有子元素

dom - 使用 PureScript 从 div 中清除所有子元素

问题描述

有很多方法可以用 JavaScript 清空 DOM 节点的元素。我想用 PureScript 来做到这一点（目的是用卤素小部件替换静态内容）。似乎在purescript-web-html和purescript-web-dom的所有功能中应该有一个明显的方法来解决这个问题，但是描述元素的大量相互冲突的方式让我感到沮丧。

在调用之前是否有一两行简单的方法来执行看似明显的操作runUI？

标签： dompurescript

解决方案

我不确定这是否是最好的方法，因为似乎应该有一个很好的功能方法来map结束HTMLCollection，但至少它有效：

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)
import Web.DOM.ParentNode
import Web.DOM.ChildNode (remove)
import Web.HTML.HTMLElement (HTMLElement, toParentNode)
import Web.DOM.Element (toChildNode)
import Effect.Class

selector :: QuerySelector
selector = QuerySelector "#halogen"

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  elem <- HA.selectElement selector
  case elem of
    Nothing -> runUI component unit body
    Just e -> do
       liftEffect $ clearChildren e
       runUI component unit e

clearChildren :: HTMLElement -> Effect Unit
clearChildren e = clearNextChild (toParentNode e)
  where
    clearNextChild :: ParentNode -> Effect Unit
    clearNextChild n = do
      last <- lastElementChild n
      case (last) of
        Nothing -> pure unit
        Just elem -> do 
          remove $ toChildNode elem
          clearNextChild n

推荐阅读