Changing an Element to HTMLElement in javascript/typescript

Question

Changing an Element to HTMLElement in javascript/typescript

When using querySelectorAll to collect elements that match a selector, they are stored in a NodeList. The forEach loop then cycles through the NodeList, where each individualItem is of type "Element".

The issue arises when passing these individualItems to the function "doThing()", which specifically requires them to be of type "HTMLElement" due to using TypeScript. This leads to the question of whether there exists a native JavaScript function for converting an "Element" type into an "HTMLElement" type, and if not, what such a function might entail.

const h = document.querySelectorAll(someClassString);

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

javascript typescript casting nodelist

Answer 1

Answer №1

If you want to retrieve the results from querySelectorAll, consider using this syntax:

document.querySelectorAll<HTMLTableElement>('.mytable')

Answer 2

If you want to retrieve the results from querySelectorAll, consider using this syntax:

document.querySelectorAll<HTMLTableElement>('.mytable')

Answer 3

Answer №2

When utilizing TypeScript, why not consider casting it to a different type? Check out the details here

const elements = document.querySelectorAll(someClassString);

elements.forEach(item => {
    item.addEventListener(c.EVENT, () => doAction(item as HTMLElement));
});

UPDATE 2023

I'm unsure if my knowledge of TypeScript was limited at the time or if this feature wasn't available yet, but as Ron Jonk pointed out, the most elegant and reusable solution is

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

elements.forEach(item => {
    item.addEventListener(c.EVENT, () => doAction(item));
});

Answer 4

When utilizing TypeScript, why not consider casting it to a different type? Check out the details here

const elements = document.querySelectorAll(someClassString);

elements.forEach(item => {
    item.addEventListener(c.EVENT, () => doAction(item as HTMLElement));
});

UPDATE 2023

I'm unsure if my knowledge of TypeScript was limited at the time or if this feature wasn't available yet, but as Ron Jonk pointed out, the most elegant and reusable solution is

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

elements.forEach(item => {
    item.addEventListener(c.EVENT, () => doAction(item));
});

Changing an Element to HTMLElement in javascript/typescript

Answer №1

Answer №2

Similar questions

Fade in background color with jquery when scrolling

How can angular DI be effectively implemented with libraries such as Modernizr, lodash, and jquery plugins to optimize performance and functionality?

Finding the current URL of an iframe and storing it in a JavaScript variable

What is the best way to test an Angular directive that has a dependency on another controller in Angular version 1.3.14?

How can you merge the class attribute with the ng-class directive based on boolean values?

How to implement hover effect to show child div within parent div using React.js

Investigating a model using various attributes

Challenges faced with JavaScript Ajax functionality

Being required to design a distinct div for every article I am extracting from the API

How does JavaScript function syntax differ in Next.js and JSX?

Is selectpicker acting up?

The fetch function consistently executes the then() block, regardless of any errors, resulting in an undefined response

Don't forget to schedule your upcoming booking with the help of Nodemailer,

Converting a text file to JSON format using Adobe Acrobat: A tutorial on proper referencing

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

Testing an asynchronous generator function in Jest using unit tests

Using Firebase Admin or the regular Firebase with Next.js

The latest version of Cloud Firestore Web (version 9) is not compatible with NextJs getServerSideProps for

The RangeError occurs when attempting to deploy to Heroku due to exceeding the maximum call stack size at Array.map in an anonymous function

Encountering difficulties in generating a binary from a nodejs application with pkg