Get document elements from a page
1 person viewing this page live
Read to the end of the post for more stats
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.
There's a reactions leaderboard you can check out too.
Analytics Information