使用JavaScript从组件外部遍历本地DOM

Posted 2021-04-12

我试图使用javascript从Polymer组件外部访问本地DOM元素。在过去，我可以使用document.querySelector并使用::shadow选择器选择shadowDOM元素。

目前，据我所知，本地DOM实现为“shady DOM”。在这种情况下如何访问本地DOM元素？

答案

假设您有一个类似下面的组件，您需要从组件外部获取div元素：

<dom-module id="my-element">
  <template>
    <div id="container"></div>
  </template>
  <script>
    Polymer({is: 'my-element'});
  </script>
</dom-module>

在您的页面上，您将元素放置为：

<my-element id="myElement"></my-element>

我们要做的第一件事就是在JS页面中引用custom-element元素：

var myElement = document.getElementById('myElement');

现在，为了到达div，我们有两个选择。第一个是Polymer的方便的automatic node finding。这使得组件中的每个元素（存在并在ready之前标记）都被添加到this.$.<my-id>中。这使得从外面轻松到达，如下：

var div = myElement.$.container;

但是如果div没有ID，或者像这样无法访问，你可以使用Polymer自己的querySelector附加到元素本身，如下所示：

var div = myElement.querySelector('div');

不过，我必须说，这两者都应该是与组件交互的“最后手段”方法。通常不是直接暴露DOM元素，而是应该公开驱动该组件的DOM的方法或属性。我建议你去Polymer Slack聊天，告诉我们你想做什么，我们可以给你一些不错的选择。

另一答案

在我的情况下，这还不够。最后帮助我的是上面的答案，结合了这个：shadowRoot.querySelector

var myElement = this.shadowRoot.querySelector('#myElement');
var div = myElement.shadowRoot.querySelector('div');

我必须补充说，我是聚合物的初学者，所以我无法解释为什么这对我有用而不是上面的代码。但我相信情况就是这样，因为我在一个页面中使用了myElement，这个页面本身就是一个自定义元素。