Get document elements from a page
Two situations over the last couple of days I’ve needed to do this and I’ve had to look up the code to do it. So I thought I’d write it down here so I can find it again.
This is being left here for me primarily as it’s something I need to do occasionally and I don’t want to have to look it up every time.
If you find it useful, then that’s a massive bonus for me 😊.
Situation 1, get a list by data-label
With Revue closing down at the end of the January I wanted to get my email list from them and it was taking forever for the export to turn up. I was in that mindspace at the time and didn’t want to switch context as I needed to put the data elsewhere. So I thought I’d just get the data from the page.
The data was in a massive table with each td
having a data-label
Email, it looked like this:
<td class="email" data-label="Email">
<span>
<a
class="data-table__cell-link"
href="/app/lists/654321/members/987654321"
>
someemail@hotmail.com
</a>
</span>
</td>
So, I just need to get the data-label
where it’s
data-label='Email'
from the page then I can work with that.
In the browser console I can do this:
let dataLabels = document.querySelectorAll("[data-label='Email']")
That will give me a node list of all the td
elements with the
data-label='Email'
I can then use Array.prototype
to convert it to
an array and then use a .forEach
to loop over it, logging out the
element text (el.innerText
).
Array.prototype.forEach.call(dataLabels, el => {
console.log(el.innerText)
})
Then it was a case of copypasta to where I needed it.
A bit manual, but it worked and it was a lot quicker that the export took to turn up 😂.
Situation 2, get a list by element type
I wanted to do some quick analysis on the performance of
scottspence.com/posts
and I wanted to get the total number of all
the posts on the page.
Each post is wrapped in an article
element, so I just needed to get
a list of all the article
elements on the page.
let articles = document.querySelectorAll('article')
Then once I got the list, all I needed to do was get the length of the
resulting NodeList
:
articles.length
// 146
If you’re interested in the performance of the page, then you can check it out over on Lighthouse Metrics.
Expanding on the above
An expansion on this is, say I have a long list of heading id’s on a page and I want to make a table of contents.
Say I only want the h2
headings, I filter on the element to see if
it includes h2
in an if statement and then lg out the contents of
the element id and the text.
let ids = document.querySelectorAll('[id]')
Array.prototype.forEach.call(ids, el => {
if (el.localName.includes(`h2`)) {
console.log(`#${el.id}`)
console.log(el.innerText)
}
})
That’s it, if you found it useful consider sharing it for others to benefit from too 😊.
Thanks.
Year to date analytics for this post