在Scala.js中按ID获取已输入的元素

Question

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

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

如何从DOM中获取已键入元素？

- Matthias Braun

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)

- Matthias Braun

---

你不需要自己进行反射操作。模式匹配器可以使用 ClassTag[T]，就像你期望的那样 (case elem: T =>)。此外，关于代码风格的注意事项，大多数人在构造 Option 时使用 Some 和 None。Option.apply 通常用于 Java 互操作（如果其参数为 null，则返回 None）。 - gzm0

我发现将 org.scalajs.dom.document 扩展为能够使用隐式类调用 document.getElement[HTMLSelectElement]("some-id") 很有用。 - ngu