时间戳

首页 > 解决方案 > jsdom如何在foreach中的另一个元素中获取一个元素

javascript - jsdom如何在foreach中的另一个元素中获取一个元素

问题描述

我是 JSDOM 解析器的新手。

我有以下内容：

<div id='mydiv'>
  <ul>
    <li><a title='a'>TextA</a></li>
    <li><a title='b'>TextB</a></li>
    <li><a title='c'>TextC</a></li>
    <li><a title='d'>TextD</a></li>
  </ul>
</div>

我正在使用以下代码，但无法获取文本“TextA”、“TextB”、“TextC”、“TextD”

const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')
  .forEach(item => {
    console.log('item', item.getElement('a')); //not sure how to continue from here
  });
})

标签： javascriptdomparser

解决方案

const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')

在这第一步之后，您将拥有一个包含 4 个列表元素的 NodeList。和

安慰。目录(categoryDiv[0])

您可以将第一个列表对象记录到控制台并查看并期望其所有属性。有多种方法可以访问封闭的锚标记。例如

  1. . 孩子=> HTML 集合
  2. . childNodes =>节点列表
  3. . getElementsByTagName('a') => HTML 集合
  4. . querySelector('a') => href 元素

只有最后一个选项直接为您提供链接元素，前三个您必须选择选择中的第一个元素才能访问链接

然后访问链接的文本有两个选项

  1. .innerHTML
  2. .textContent

在这种情况下，选择哪个并不重要，因为如果在链接上调用，两者都会在链接标签内为您提供文本。如果在列表元素上调用它看起来像这样

listElem.outerHTML // <li><a title="a">TextA</a></li>
listElem.innerHTML  // <a title="a">TextA</a>
listElem.textContent // TextA

所以你实际上不必访问链接元素。只需在列表项上直接调用 .textContent

最后你想使用 .map 而不是 .forEach 因为 .forEach 只迭代，但不返回任何东西。NodeList 不能直接使用 .map 进行迭代，但可以使用扩展运算符轻松转换

所以所有在一起，例如像这样

const categoryDiv = [...document.querySelectorAll('#mydiv > ul > li')]
  .map(listItem => listItem.textContent)

console.log(categoryDiv)  // ['TextA', 'TextB', 'TextC', 'TextD']

或这个

const categoryDiv = Array.from(document.querySelectorAll('#mydiv > ul > li'), listItem => listItem.textContent)

或者甚至没有迭代的非常快速的方法是

document.querySelector('#mydiv ul')
  .textContent  // 'TextA TextB TextC TextD'
  .split(' ')  // ['TextA', 'TextB', 'TextC', 'TextD']

推荐阅读