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.dir(categoryDiv[0])

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

.children => HTML Collection
.childNodes => NodeList
.getElementsByTagName('a') => HTML Collection
.querySelector('a') => href 元素

只有最后一个选项直接给你 link 元素，前三个你必须 select selection 中的第一个元素才能到达 link

然后访问 link 的文本还有两个选项

.innerHTML
.textContent

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

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

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

最后，您想使用 .map 而不是 .forEach，因为 .forEach 仅迭代，但 return 不执行任何操作。直接使用 .map 无法迭代 NodeList，但可以使用扩展运算符

轻松转换

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

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

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

jsdom how to get an element inside another element inside foreach

javascript

domparser