在 Scala.js 中按 ID 获取类型元素

Question

我在 DOM 中有图像元素的 HTML ID，我想获取该元素作为 HTMLImageElement。

我知道 document.querySelector(s"#$imageId")，但是这个 returns 只是 HTMLElement，它不是很有用，因为我需要访问，例如，图像的 src 属性。

如何从 DOM 中获取 typed 元素？

Answer 1

一种方法是将由 document.querySelector 和 return 编辑的 HTMLElement return 转换为 Option[Image]:

import org.scalajs.dom.document
import org.scalajs.dom.html.Image

def getImage(imageId: String): Option[Image] = {
  val queryResult = document.querySelector(s"#$imageId")
  queryResult match {
    case image: Image => Some(image)
    case other =>
      println(s"Element with ID $imageId is not an image, it's $other")
      None
  }
}

用法：

val result = getImage("my-image").fold {
  "Couldn't find image"
} { image => s"My image URL: ${image.src}" }

println(result)

适用于各种元素（img、div、input 等）的更通用的解决方案是：

import scala.reflect.ClassTag
import org.scalajs.dom.document

def getElement[T: ClassTag](elementId: String): Option[T] = {
  val queryResult = document.querySelector(s"#$elementId")
  queryResult match {
    case elem: T => Some(elem)
    case other =>
      println(s"Element with ID $elementId is $other")
      None
  }
}

用法：

import org.scalajs.dom.html.Div

val divResult = getElement[Div]("my-div").fold {
  "Couldn't find div"
} { div => s"Div display style: ${div.style.display}" }

println(divResult)

在 Scala.js 中按 ID 获取类型元素

Get typed element by ID in Scala.js

html

dom

scala

scala.js