我正在尝试在div上使用核心动画，以动画其位置。为此，我必须使用document.getElementById（）进行选择。问题是，我的index.html文件中的结构相当复杂，我找不到选择该div的方法。
这是index.html的结构（我需要选择#el）：http ://i.imgur.com/phWyArO.jpg
我的index.html文件：
<template is="auto-binding" id="t">
<!-- Route controller. -->
<flatiron-director route="{{route}}" autoHash></flatiron-director>
<!-- Keyboard nav controller. -->
<core-a11y-keys id="keys" target="{{parentElement}}"
keys="up down left right space space+shift"
on-keys-pressed="{{keyHandler}}"></core-a11y-keys>
<core-header-panel>
<core-toolbar class="panel-personal" hidden?="{{shortView}}">
...
</core-toolbar>
<core-toolbar class="panel-nav">
<paper-tabs valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
on-core-select="{{menuItemSelected}}" link flex style="width:100%; height:100%;" id="tabs">
<template repeat="{{page, i in pages}}">
<paper-tab><a href="#{{page.hash}}">{{page.date_month}}<br/><small>{{page.date_year}}</small></a></paper-tab>
</template>
</paper-tabs>
</core-toolbar>
<nav class="menu">
...
</nav>
<div horizontal layout fit>
<core-animated-pages id="pages" selected="{{route}}" valueattr="hash"
transitions="slide-from-right"
on-tap="{{cyclePages}}" flex self-stretch>
<template repeat="{{page, i in pages}}">
<section hash="{{page.hash}}" class="card-wrapper">
<div flex fit>
<div class="card-container" vertical layout fit >
<h1>{{page.name}}</h1>
<h2>{{page.category}}</h2>
<paper-button raised class="project_button"><a href="{{page.link}}" target="_blank"><core-icon icon="social:share" ></core-icon> visit project</a> </paper-button>
</div>
<div center-justified layout fit class="card-content">
<div>
<h4>Project description</h4>
<p>{{page.desc}}
</p>
</div>
</div>
<div class="card-background" id="el" fit></div>
</div>
</section>
</template>
</core-animated-pages>
</div>
</core-header-panel>
</template>
我该如何选择#el div？
如果您的元素在模板内部，则它不属于DOM，而是影子DOM。作为补充，在Web Components网站上有一篇有关该主题的文章，Rob Dodson写了一篇有关shadow DOM基础的详细文章。
编辑：Polymer 1.0引入了一个特定的概念，Shady DOM ...
我承认，聚合物元素，多个模板和影子DOM之间的关系对我而言并不是很明显。乍一看，影子DOM与模板相关联。Rob Dodson在另一篇文章中还提供了有关模板重复的一些解释。似乎随着重复而变得微妙：这里您只有一个影子DOM，并且ID变得毫无意义。更糟糕的是，我猜由于嵌套模板，您已经嵌套了影子DOM。在这里我根本不清楚的是：在这种情况下可见性如何？
编辑：有关可见性的更多信息可在以后的交流中找到...
编辑：模板重复语法在Polymer 1.0中得到了发展
作为结论（据我所知），由于模板重复，即使在重复的模板阴影DOM中，您也可能具有多个相同的ID 。有效的策略是使用类代替ID进行选择。
的Javascript被关联到聚合物在方法调用元件。要通过Javascript在影子DOM中进行选择，您应该使用querySelector。您使用document.getElementById（）建议的解决方案对DOM有效。重点是关于嵌套模板。您对该主题的另一次交流有个建议。使用this.shadowRoot.querySelectorAll（...）提出了一个解决方案，但Polymer项目中的一个问题涵盖了这一点：这可能有效，但可能不是一个好习惯。Polymer文档中有关节点查找的详细信息是在这里：该文章中有一个样本看起来像您的问题。
根据Polymer文档，当您调用Polymer元素方法时，假设您要在ready事件中进行选择，并在嵌套模板中分配一个容器ID，则其外观应类似于以下内容：
<polymer-element name="my-element"...>
<template ...>
<div id="container">
<template ...>
...
<div class="el">
</div>
...
</template>
</div>
</template>
<script>
Polymer('my-element', {
ready: function() {
this.$.container.querySelector('.el');
}
});
</script>
</polymer-element>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句