Polymer mit getElementsby # Methode auf inner-h-t-m-l

Question

Ich versuche, Eigenschaften für verschiedene Elemente innerhalb eines Textes, der durch inner-h-t-m-l geladen wird, aber ich bekomme nicht nur ein bestimmtes Element zu erhalten.

Hier ist mein Code:

<template> 

<iron-ajax 
     auto 
     url="[[some/path/url.html]]" 
     handle-as="text" 
     last-response="{{inputText}}"></iron-ajax> 

<div class="textcontent" inner-h-t-m-l="{{inputText}}"></div> 
</template> 
<script> 
    Polymer({ 
     is: 'text-page', 

     ready: function() { 
     var test = document.getElementsByClassName("author"); 
     console.log(test); 
     } 
    }); 
</script> 

So habe ich zwei Fragen dazu:

1. Ist dies der beste Weg, um eine HTML-Seite in ein Polymer Element zu laden?
2. Der Ausgang des console.log ist ein Array, das wie folgt aussieht:

korrekt

HTMLCollection[0] 
0: span.author 
1: span.author 
2: span.author 
length: 3 
__proto__: HTMLCollection 

Dies ist, da drei Elemente mit class-name "Autor" sind. Aber wenn ich dasselbe mit console.log(test[0]) mache, um nur das erste zu bekommen, bekomme ich "undefined" als Ausgabe. Wie bekomme ich nur den ersten, und noch wichtiger, den Wert des span?

Answer 1

1. Ja, ich persönlich denke, dies ist der beste Weg HTML in ein Polymer Element zu laden, wenn Sie diese HTML import als normale Art und Weise zu tun, verwenden können.

2. Mit getElementsByClassName Sie erhalten eine HTML collection und Sie können nicht direkt auf den Wert dieser Elemente zugreifen. Sie können verschiedene Methoden verwenden, um es als ein Array wie Array.from oder for...of loop zu erhalten. Eine andere Lösung könnte sie als ein Array mit dem einfachen this.querySelectorAll() bekommen.

Klärung here (StackOverflow answer) und here (Medium article).

const html = `<span class="author">test</span><span class="author">another</span>` 
 
addEventListener('WebComponentsReady', function() { 
 

 
    Polymer({ 
 
    is: 'x-example', 
 
    properties: { 
 
     html: { 
 
     type: String, 
 
     value: html 
 
     } 
 
    }, 
 

 
    ready: function() { 
 
     // 1° solution 
 
     const test = this.getElementsByClassName('author'); 
 
     const first = Array.from(test)[0]; 
 
     console.log('First element innerText --->', first.innerText); 
 

 
     // Or you can simply loop on the array 
 
     Array.from(test).forEach(item => console.log(item.innerText)); 
 

 
     // 2° solution 
 
     const test2 = this.querySelectorAll('.author'); 
 
     test2.forEach(item => console.log(item.innerText)); 
 
    } 
 
    }); 
 
});

body { 
 
    font-family: sans-serif; 
 
}

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 

 
<dom-module id="x-example"> 
 
    <template> 
 
    <style> 
 
     :host { 
 
     display: block; 
 
     } 
 
    </style> 
 

 
    <h1>polyfiddle</h1> 
 
    <div inner-H-T-M-L="[[html]]"> 
 
    </div> 
 
    </template> 
 
</dom-module> 
 

 
<x-example></x-example>