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
});
})
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
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
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']
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);
});
})
This could be as simple as:
let targets = document.querySelectorAll('#mydiv > ul > li a');
for (let target of targets) {
console.log(target.text);
}