i am new to JSDOM parser.

I have the following:

<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>

I am using the following code but not able to get the text '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
  });
})

CodePudding user response：

Simply modify your original code with getElementsByTagName and innerHTML:

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

CodePudding user response：

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

After this first step you have a NodeList with the 4 list elements. With

console.dir(categoryDiv[0])

you can log the first list object to the console and see and expect all its properties. There are various ways to access the enclosed anchor tags. For example

1. .children => HTML Collection
2. .childNodes => NodeList
3. .getElementsByTagName('a') => HTML Collection
4. .querySelector('a') => href element

Only the last option gives you the link element directly, with the first three you have to select the first element in the selection to get to the link

For then accessing the text of the link there are again two options

1. .innerHTML
2. .textContent

In this case it doesn't matter which to choose because both give you the Text inside the link tags, if called on the link. If called on the list element it would look like this

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

Sooo you actually don't have to access the link element. Simply call directly .textContent on the list items

Lastly you want to use .map instead of .forEach since .forEach only iterates, but doesn't return anything. The NodeList directly is not iterable with .map but can be easily converted with the spread operator

So all together for example like this

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

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

or this

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

Or a very fast way without even iterating would be

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

CodePudding user response：

This could be as simple as:

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

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