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

Question

我是 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
  });
})

Answer 1

只需使用getElementsByTagName 和innerHTML 修改您的原始代码：

const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')
.forEach(item => {
   console.log('item -- ' + item.getElementsByTagName('a')[0].innerHTML); 
 });
})

Answer 2

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

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

console.目录(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']

Answer 3

这可能很简单：

  let targets = document.querySelectorAll('#mydiv > ul > li a');

  for (let target of targets) {
    console.log(target.text); 
  }