查找列表中的所有项目，并使用url记录它们。

Question

我试图返回这个html列表中的所有项目(它的内部HTML和引用URL )。

我可以记录并找到一个项目，但我的console.log并不是一次全部检索。

​

document.getElementsByClassName('vxl-filelink-text');
var sampleX = document.getElementsByClassName('vxl-filelink-text');
var text; 
sampleX[0].innerHTML;
sampleX[0].href;



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>

​

我该怎么做？

Answer 1

这样做的一种方法是构建一个文本/链接对象数组，然后可以迭代该数组来显示所有值，或者将其用于任何其他目的：

​

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>

​