如何从模板元素中获取子元素？

Question

dom-change事件对象e在Polymer.dom(e).localTarget给我<template is="dom-if"，因为它应该。但我如何访问孩子<div id="uploadedImage1"？ firstChild和firstElementChild为空。

<template is="dom-if" if="[[uploadedImage1]]"> 
    <div id="uploadedImage1" class="row-image horizontal layout"> 
     foo 
    </div> 
    </template> 

我想也许我需要做的另一个查询离localTarget的对象，但没有成功：

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = Polymer.dom(bob).querySelector('div') 
     console.log(sue); 
    }); 

我也尝试了这些没有成功：

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = this.queryEffectiveChildren(bob); 
     console.log(sue); 
    }); 

---

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = bob.getEffectiveChildNodes(); 
     console.log(sue); 
    }); 
    } 

从children length documentation example，甚至Polymer.dom(this).children.length返回0：

<dom-module id="image-uploader"> 
    <template> 
    <style include="iron-flex iron-flex-factors iron-flex-alignment"> 


    <div id="images-container" class="horizontal layout center wrap"> 

     <div hidden="[[uploadedImage1]]" class="layout vertical center-center"> 
     <div class="row-image horizontal layout"> 
      <input 
      type="file" 
      name="file" 
      data-uploaded="uploadedImage1" 
      id="image1" 
      accept="image/jpeg" 
      class="inputfile" /> 
      <label 
      for="image1" 
      id="image1" 
      class="image-show horizontal layout center center-justified"> 
      <iron-icon icon="add" prefix></iron-icon> 
      Upload Image 
      </label> 
     </div> 
     <i>*Main Image</i> 
     </div> 

     <template is="dom-if" id="foo" if="[[uploadedImage1]]"> 
     <div id="uploadedImage1"> 
      foo 
     </div> 
     </template> 

    </div> 

    </template> 

    <script> 
    Polymer({ 
     is: 'image-uploader', 
     properties: { 
     uploadedImage1: { 
      type: Boolean, 
      value: false 
     } 
     }, 
     ready: function(e) { 
      console.log(Polymer.dom(this).children.length); 

Answer 1

还有我看到了一些问题，所以我会通过他们交谈，并在最后给出一个工作示例。

理解template

的<div id="uploadedImage1" ...元素可以，绝不会在dom-if模板的孩子，只要你的组件的本地DOM而言。

根据W3C Living Document，template标签定义了一个标记块（称为DocumentFragment），该标记块在物理上并不存在于主Document中，并且可以在运行时克隆并放入Document中。它不包含任何呈现的标记，因此您不能要求template了解在文档的其余部分中它的用途。

为了说明一个真实的例子，考虑一个橡皮图章（模板）和一张纸（文档）。如果您在一次或多次上印记并将其压到纸上，则无法查看橡皮图章，并知道在纸上印有图像的内容，位置或次数。要获得这些信息，你必须看看这篇文章本身。

如果添加一个容器元素周围的模板，并登录到控制台，你会看到很清楚这是什么样子从文档的角度：

<div id="container" class="style-scope my-el"> 
    <div id="uploadedImage1" class="style-scope my-el"> 
    foo 
    </div> 
    <template is="dom-if" id="foo" class="style-scope my-el"></template> 
</div> 

了解dom-change事件上下文

您有一个合理的想法来使用Polymer的DOM方法来查找您想要的元素，但是在所有尝试中，您都从事件目标（它是模板）的上下文开始。

同样，该模板实际上并不包含您想要查找的元素，因此您将永远不会在此处找到它。

了解聚合物的DOM基础

你所引用的文件是用于访问DOM轻落地儿到<container>。在你的情况下，你并没有在你的元素阴影DOM中加入任何轻的DOM子元素。您正在使用dom-if模板根据状态有条件地显示/隐藏内容。

---

解决方案

你可以达到你想要通过简单地询问你的组件使用$$速记方法查找在组件的本地DOM元素是什么。有一点需要考虑，因为性能方面的原因，一旦条件变得很真实，聚合物会对dom-if模板的内容进行标记，然后使用CSS来显示和隐藏它，所以它可能会使模板位于DOM中但未显示。

这里是工作示例的摘录（见fiddle），它通过给该​​组件对象dom-change监听器访问（通过bind()）达到你的目标，因此它可以一）访问组件的本地DOM找到元素和B ）考虑dom-if条件是否真实。

this.$.foo.addEventListener('dom-change', function() { 
    if (this.prop1) { 
    console.log(this.$$('#uploadedImage1')); 
    } else { 
    console.log(null); 
    } 
}.bind(this)); 

Answer 2

Polymer.dom(e).localTarget.content让我进入documentFragment，至少它适用于Chrome。