Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting Element to HTMLElement in javascript / typescript

So, I'm getting a list of elements that match a selector using querySelectorAll, which stores them in a NodeList.

I'm then scanning through the NodeList with a forEach loop, at which point the type of each individualItem is "Element".

However, I'm feeding these individualItems into a function "doThing()" that expects individualItem to be of type "HTMLElement" (I'm using typescript). I'm wondering if there is some built in js function for converting an "Element" type into an "HTMLElement" type, or, if not, what a function like that might looks like

const h = document.querySelectorAll(someClassString);

h.forEach(individualItem => {
            individualItem.addEventListener(c.EVENT, () => doThing(individualItem));
})    
like image 850
Luke Avatar asked May 11 '26 20:05

Luke


2 Answers

To type the output from querySelectorAll you can do it this way:

document.querySelectorAll<HTMLTableElement>('.mytable')
like image 140
Ron Jonk Avatar answered May 14 '26 10:05

Ron Jonk


Since you are using TypeScript, why don't you cast it to another type? See it here

const h = document.querySelectorAll(someClassString);

h.forEach(individualItem => {
    individualItem.addEventListener(c.EVENT, () => doThing(individualItem as HTMLElement));
});

EDIT 2023

I don't know if I had a limited knowledge of Typescript when I wrote this or if this functionality wasn't available yet, but as Ron Jonk pointed out, the most elegant and reusable solution is

const h = document.querySelectorAll<HTMLElement>(someClassString);

h.forEach(individualItem => {
    individualItem.addEventListener(c.EVENT, () => doThing(individualItem));
});
like image 32
Gabriel Lima Avatar answered May 14 '26 10:05

Gabriel Lima



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!