Get HTMLElement from Element

Question

I have an Element, and I can not figure out how to get the HTMLElement from it.

For example:

A link

        

Answer 1

You just need to cast it:

let nodes = document.querySelectorAll('a');
for (let i = 0; nodes[i]; i++) {
    let node = nodes[i];
    var c = (nodes[i] as HTMLElement).style.backgroundColor = 'red';
}

You can even cast to a more specific element:

(nodes[i] as HTMLAnchorElement).style.backgroundColor = 'red';

The thing is that document.querySelectorAll returns the most generic element type, but if you know yourself what is the specific type then you can cast, because you "know better" than the compiler.

Answer 2

You're close!

var nodes = document.querySelectorAll('a'); // Returns a NodeList of Elements
for (let i = 0; nodes[i]; i++) {
    // node is your element!
    var node = nodes[i];
    node.style.backgroundColor = "blue";
}

Answer 3

The way that works, is to cast the element to an HTMLElement.

let nodes: NodeListOf<HTMLElement> = document.querySelectorAll('a') as NodeListOf<HTMLElement>;

Answer 4

let nodes = document.querySelectorAll<HTMLElement>('a');
// or
let nodes = document.querySelectorAll<HTMLAnchorElement>('a');