getElementById 一个 XBL 绑定的 XUL 元素答案

【问题标题】：getElementById a XBL bound XUL elementgetElementById 一个 XBL 绑定的 XUL 元素
【发布时间】：2014-04-24 06:37:39
【问题描述】：

我正在尝试访问 XBL 绑定的 XUL 元素。我想通过 javascript 来控制它。

这是绑定。

<binding id="imip-throbber">
    <resources>
          <stylesheet src="chrome://lightning/skin/lightning-widgets.css"/>
    </resources>
    <content pack="center" align="center">
        <xul:image anonid="loading-throbber" src="chrome://global/skin/icons/loading_16.png" hidden="false"/>
    </content>
</binding>

这是 CSS 绑定

imip-throbber {
  -moz-binding: url(chrome://lightning/content/lightning-widgets.xml#imip-throbber);
}

这是 xul 实现

lightning-notification-bar id="imip-bar"
                                    collapsed="true"
                                    insertbefore="msgHeaderView"
                                    label="&lightning.imipbar.description;">

          <button id="imip-button1"
                  class="imip-button"
                  hidden="true"/>
          <button id="imip-button2"
                  class="imip-button"
                  hidden="true"/>
          <button id="imip-button3"
                  class="imip-button"
                  hidden="true"/>

    <imip-throbber id="loading-lbl">
</lightning-notification-bar>

这是javascript访问

let imipThrobble = document.getElementById("loading-lbl");

该 javascript 行下方的代码似乎没有被执行。我是否需要在绑定中添加一些内容才能访问该元素？

【问题讨论】：

标签： javascript xul xbl

【解决方案1】：

不容易……

MDN 上的documentation on XBL 提到了 XBL 自动添加的“匿名”内容：

[XBL 绑定 xml 文件] 内容标记中的元素是匿名添加到滚动条。虽然匿名内容是显示在屏幕上，您无法通过脚本中的 正常方式。对 XUL 来说，就好像只有一个元素，尽管它实际上是由许多元素组成的。

（强调我的）。

无论如何...

MDN 上的 XBL 1.0 参考继续说

实际上，匿名内容存在于自己的绝缘口袋中文档内。使用 parentNode，匿名内容节点可以引用他们的显式父母，但显式父母没有他们的匿名孩子的知识。匿名内容不可通过绑定元素的 childNodes 列表访问，也不是使用 firstChild/nextSibling 可访问以迭代孩子的绑定元素。匿名内容只能访问通过getAnonymousNodes 和 getAnonymousElementByAttribute.

因此，您可以使用 getAnonymousNodes / getAnonymousElementByAttribute 获取由 XBL 绑定自动插入的匿名内容。这些方法主要由绑定本身（或与之相关）的 JavaScript 代码使用，但是，您可以在绑定到 XUL DOM 的 JavaScript 中使用它们。 MDN 上的一些 examples。

但是为什么呢？

一个更好的问题是，为什么你想从绑定到 XUL DOM 的 JavaScript 访问这些元素？

一个很好的理由可能是您没有编写绑定并且您希望使用一些不同的内容/行为即时“升级”它们。另一方面，如果您确实编写了有问题的 XBL 绑定，为什么不在绑定到 XBL 元素的 JavaScript 中完成您想要做的事情呢？您可以将 JavaScript methods 添加到您已经可以访问匿名内容（以及 XUL DOM 的其余部分）的元素中。

【讨论】：