从Element获取HTMLElement

Question

我有一个Element,我无法弄清楚如何从中得到HTMLElement它.

例如:

<a href="">A link</a>
<a href="">Another link</a>

然后我就这样得到它们:

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?
}

编辑

这是代码:

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

你只需要施放它:

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

您甚至可以转换为更具体的元素:

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

问题是document.querySelectorAll返回最通用的元素类型,但是如果你知道自己什么是特定类型那么你可以进行转换,因为你比编译器"知道更好".

Answer 2

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

Answer 3

有效的方法是将元素转换为HTMLElement.

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