Question

我正在尝试在UL Html元素中创建导航。

我做到了这一点：

let htmlUL = <HTMLElement>document.getElementById('autocomplete_ul_' + this.name);
if (arg.keyCode == 40) { // down arrow
    if (this.arrowPosition < htmlUL.childNodes.length)
        this.arrowPosition++;
    console.log(htmlUL.childNodes[this.arrowPosition]);

} else if (arg.keyCode == 38) { //up arrow

    if (this.arrowPosition >= 2)
        this.arrowPosition--;

    console.log(htmlUL.childNodes[this.arrowPosition]);
}

在控制台中，按UP和DOWN时，我看到正确的数据。

但我不能成为htmlUL.childNodes[this.arrowPosition].focus()： Property 'focus' does not exist on type 'Node'

如何专注于我的childNodes元素？感谢

Answer 1

您必须将子元素强制转换为HTMLElement：

const id = `autocomplete_ul_${this.name}`;
const htmlUL = document.getElementById(id) as HTMLElement;

if (arg.keyCode === 40) { // down arrow
    if (this.arrowPosition < htmlUL.childNodes.length) {
      this.arrowPosition++;
    }
} else if (arg.keyCode === 38) { //up arrow
    if (this.arrowPosition >= 2) {
      this.arrowPosition--;
    }
}
const child = htmlUL.childNodes[this.arrowPosition] as HTMLElement;
child.focus();

OT：您使用标记Angular标记了您的问题，因此您应该使用ViewChild装饰器而不是使用{{1}来获取列表元素 angular-way }}

如何在Javascript中为childNodes添加焦点

1 个答案: