javascript - 如何通过列表向下键或向上键以触发对事件侦听器内项目的关注？

Question

我正在尝试focus()在特定元素节点上运行一个方法，具体取决于是否按下了向上箭头键或向下箭头键。我要关注的列表项是我正在侦听的兄弟节点的子节点，因为我希望焦点从搜索框（输入标签）转到兄弟节点的子节点。

当按下向下箭头键时，我将 firstChild 属性放在事件侦听器内的 searchSuggest 框中，但是，这将在focus()每次按下第一个子项或列表项时运行该方法，而不是列表中的下一个兄弟项。

  const d = document,     
    searchBox = d.getElementById("PFsearchBox"),
    searchSuggest = d.getElementById("PFsearchSuggest")


  searchBox.addEventListener("keydown", e => {
    // up arrow
    if (e.which === 38) {
        e.preventDefault();
        // select the last item in the suggestion list
        searchSuggest.children[searchSuggest.children.length - 1].focus()
    }

    // down arrow
    if (e.which === 40) {
    e.preventDefault();
    searchSuggest.firstChild.focus()
    }
  });

我希望当按下向下箭头键时，焦点从输入框转到 searchSuggest 节点中的第一个子列表项，然后每次按下向下箭头键时依次向下列表，反之亦然箭头键被按下。

标签： javascripthtmlevent-handlingaddeventlistenerdom-events