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

Question

我在 DOM 中有一个图像元素的 HTML ID，我想以 HTMLImageElement 的形式获取该元素.

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

如何从 DOM 中获取 typed 元素？

Answer 1

一种方法是转换 document.querySelector 返回的 HTMLElement 并返回一个 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)