I created dinamically paper-item's and I want to get the first one when the page is loaded. This paper-item's where created inside a dom-repeat like this:

```
<template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
    <paper-item on-tap="funcion" class="olakease"><span>{{sub.Name}}</span></paper-item>
</template>

```

To get what I want, I tried using this on the ready and attached functions, but doesn't work:

```
attached: function () {
    this.async(function () {
      console.log("______________________________________________________");
      var htmlCollection = document.getElementById("controlAppMenu").getElementsByTagName("paper-item");
      console.log("___________________htmlCollection___________________________________");
      console.log(htmlCollection);
      console.log("______________________________________________________");
      var className = this.getElementsByClassName('olakease');
      console.log("___________________getElementsByClassName___________________________________");
      console.log(className);
      console.log("______________________________________________________");
      console.log(htmlCollection.length) //show 0
      console.log(elements.length) //show 13
    });
}

```

Console shows:
[![why htmlCollection.length is 0?](https://i.stack.imgur.com/xapHQ.png)](https://i.stack.imgur.com/xapHQ.png)[![why this cant be accessed using javascrip?](https://i.stack.imgur.com/4D77e.png)](https://i.stack.imgur.com/4D77e.png)[![why this works?](https://i.stack.imgur.com/yVOlf.png)](https://i.stack.imgur.com/yVOlf.png)

Why getElementsByClassName works and getElementsByTagName don´t?   

In my case, I need to get the first paper-input, and use classes dont look good to me. Anyone can help me? I hope you can understand my poor English!

Edit
----

This is the code where I create my papaer-item:

```
<div id="controlAppMenu">
<template is="dom-repeat" items="{{menu.Options}}" as="menu" id="iron_pages_app">
    <paper-item on-tap="toggle" pos="{{index}}" referencia$="{{menu.Id}}"><iron-icon icon="{{menu.Icon}}"></iron-icon><span>{{menu.Name}}</span></paper-item>
    <template is="dom-if" if="{{hasMenu(menu.Options)}}">
        <iron-collapse id="{{menu.Id}}" class="ironCollapseClass">
            <template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
                <paper-item on-tap="funcion" padre$="{{menu.Id}}" class="olakease"><span style="padding-left: 3em">{{sub.Name}}</span></paper-item>
            </template>
        </iron-collapse>
     </template>
</template>
</div>

```

Edit 2
------

I made ​​a [JSBin](http://jsbin.com/cuxuco/1/edit?html,console,output) using zerodevx's example. But I can not make it work as I want. When the attached function is called means I can use dom elements, right?
My menus are generated using an iron-ajax request in ready´s function, so I have another question, what function is called first, attached function or iron-ajax request function? (Documentation says [here](https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order) first ready function, then attached function) I think maybe here is the real problem in this situation. Thanks!