Advertisements
I am trying to return all of the items in this html list (name and url_. I can console.log and find one item, but my console.log isn’t working to retrieve all of them at once.
document.getElementsByClassName('vxl-filelink-text');
var sampleX = document.getElementsByClassName('vxl-filelink-text');
sampleX[0].innerHTML;
sampleX[0].href;
//need a for loop to get all this data in the console
for (let i = 0; i < 5; i++) {
text += "name and url";
}
<ul class="vxl-list vxl_1_105_435">
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">duck.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">bird.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">truck.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">car.jpg</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
</ul>
>Solution :
One way to do this is to build an array of text/link objects, you can then iterate that array to display all the values, or use it for any other purpose:
const links = document.getElementsByClassName('vxl-filelink-text');
const result = Array.from(links).map(n => ({ text: n.textContent, link : n.href }))
result.forEach(({ text, link }) => console.log(`${text}: ${link}`))
<ul class="vxl-list vxl_1_105_435">
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">duck.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">bird.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">truck.png</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
<li>
<div class="vxl-filelink">
<div class="vxl-filelink-link-icon vxl_1_106_550"></div><a class="vxl-filelink-text" href="https://yahoo.com/food" target="_blank">car.jpg</a>
<div class="vxl-filelink-filesize vxl-body-small"></div>
</div>
</li>
</ul>