从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返回最通用的元素类型，但是如果你知道自己的特定类型是什么，那么你就可以投射，因为你了解更多＆＃34;而不是编译器。

Answer 2

你关闭了！

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

可行的方法是将元素转换为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');