如何在Javascript中将焦点添加到childNodes

Question

I'm trying to create a navigation in a UL Html Element.

I've done this :

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]);
}

In the console, I see the correct data when I press UP and DOWN.

BUT I can't make a htmlUL.childNodes[this.arrowPosition].focus() : Property 'focus' does not exist on type 'Node'

How can I focus on my childNodes Element? Thanks

Answer 1

You have to cast the child element to type 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: You tagged you question with the tag Angular , therefore you should get the list element the angular-way using the ViewChild decorator instead of using document.getElementById .