获得通过ID在Scala.js

Question

类型的元素我在DOM图像元素的HTML ID，我想获得的元素作为HTMLImageElement。

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

如何我从DOM的类型元素？要做到这一点

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)