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 href="">A link</a>
<a href="">Another link</a>

I then get them like so:

var nodes: NodeListOf<Element> = document.querySelectorAll('a'); // Returns a NodeList of Elements
for (let i = 0; i < nodes.length; i++) {
    var node = nodes.item(i);
    // How can I get the HTMLElement here?
}

Edit

Here is the code:

let nodes: NodeListOf<Element> = document.querySelectorAll('a');
for (let i = 0; nodes[i]; i++) {
    let node = nodes[i];
    var c = nodes[i].style.backgroundColor = 'red';
}

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

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

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

If you're using TypeScript, the solution would look something like this:

const nodes = document.querySelectorAll(".link");

function isHTMLElement(node: Node): node is HTMLElement {
  return node instanceof HTMLElement;
}

const onlyHTMLNodes = Array.from(nodes).filter(isHTMLElement);

If you're only using JSDoc, it'll look like this:

const nodes = document.querySelectorAll(".link");

/**
 * @param {Element} node
 * @returns {node is HTMLElement}
 */
function isHTMLElement(node) {
  return node instanceof HTMLElement;
}

const onlyHTMLNodes = Array.from(nodes).filter(isHTMLElement);

In both cases, you'll end up with an array of HTMLElements.

node instanceof HTMLElement is the key thing that makes this work; if you manage to query something that isn't HTML like a SVG element, that will filter it out. The node is HTMLElement type predicate is what makes TS/JSDoc aware of what you've done.

The other answers here are okay, but either depend on implicit assignments that work just because you're querying an a element (so it returns NodeListOf<HTMLAnchorElement>) or use explicit type casting, which might be okay in this situation but, depending on the kind of query you're making, might stick you with a runtime error in the future.

Answer 5

in case someone else is using a combination of jsdoc and @ts-check for error checking

/** @type {NodeListOf<HTMLElement>} */
const nodes = document.querySelectorAll('a');

nodes.forEach( (node) => {
  node.style.backgroundColor = 'blue';
}) 

Answer 6

below code worked for me

document.getElementById("elementId") as HTMLElement

Answer 7

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";
}