jquery - Scala.js:选择和操作生成的 SVG

Question

我正在努力解决一些看似简单的事情。

使用 Scaja.JS，我通过 ScalaTags 库生成了一些 SVG。

我现在希望使用事件操作 SVG 元素:

circ.onclick = { e: dom.MouseEvent => ... }

具体来说，我想选择某个类的所有元素，然后在它们上切换一些类属性。

我尝试了 Scala.js JQuery 绑定(bind)。虽然我可以用它检索选择，但我无法操作所选元素(设置类等)。这似乎是 SVG 作为一种不同类型的 DOM 的一个根本问题，无法使用 JQuery 进行操作。

接下来，我尝试了低级 DOM API。这让我做出选择:

document.body.getElementsByClassName("myClass").foreach { node =>  ... }

我现在很难操作节点的属性。我可以访问它们，但无法设置它们，因为 node.attributes.setNamedItem(...) 需要一个 raw.Attr 参数，但我在创建时遇到了麻烦，没有构造函数来设置 Attr 的 name。

此外，使用低级 API 非常不方便。我更愿意选择一些更容易操作的类，例如元素。

有什么想法吗？

Answer 1

JavaScript DOM api 中也没有 Attr 的构造函数。尝试在 JavaScript 中计算 new Attr() 将导致“非法构造函数”类型错误。但是，您可以使用 document.createAttribute(name: String) 创建属性。

尽管 getElementsByClassName 返回一个 NodeList，但每个项目实际上都是一个 Element(您必须使用模式匹配或类似方法对其进行向下转换)。从 dom.Element 中，您可以调用 setAttribute(name: String, value: String)，这可能比手动创建 Attr 更方便这么低的水平。

此外，jQuery 使用表达式选择 dom 元素的能力现在大部分已使用 document.querySelectorAll 内置到 DOM 中。您可以尝试类似 svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement])
.foreach { _.setAttribute("someAttribute", "newValue") }.

当然，要将 NodeList 视为 Scala 集合，需要 import org.scalajs.dom.ext._ 将隐式引入范围，但看起来您已经在这样做了那个。