Javascript 查找最后一个子项是否在键控下具有特定类

我有一个数据网格，在右箭头键上，它需要检查它在标题中是否有最后一个子项，以及最后一个子项在按下键时是否应用了class

focus visible

。我能够找到焦点可见的最后一个子元素和活动元素，但是当用户点击箭头键将焦点设置在最后一个子元素上时，我的逻辑发现最后一个子元素的焦点可见时出现问题

到目前为止，这是我的逻辑，但不确定我在检查最后一个孩子的课程时会错在哪里：

  //
  //ON ARROW RIGHT, IF FOCUS IS ON LAST HEADER, SET FOCUS TO FIRST BODY CELL
  //
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    //Get last child
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    //focus visible class on nav element
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    console.log("last child: ", headerCell);
    console.log("has focus visible: ", hasFocusVisible);
    if(headerCell.classList.contains('focus-visible')) {
      //if headerCell and hasFocusVisible, set focus to first cell in body
      document.querySelector('.ag-cell').focus();
    }
  }

---

当前问题状态：

我发现，为最后一个标题元素设置布尔值并切换用户是否在最后一个元素上允许用户在焦点设置为主体单元格之前导航到末尾：

let lastHeaderCell = false;
document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    if(lastHeaderCell === true) {
      document.querySelector('.ag-cell').focus();
      lastHeaderCell = false;
    }
    else if(headerCell.classList.contains('focus-visible')) {
      lastHeaderCell = true;
    }
  }
}

---

是否要检查

headerCell

是否具有“focus visible”类，以确定焦点是否位于最后一个单元格上<代码>如果（headerCell.classList.contains（“焦点可见”）{…}@mhodges-是的，这就是我想要弄清楚的。其中一个问题是，应该具有“焦点可见”的类是名为

ag header cell label

@mhodges的

ag header cell label的子类-我发现我可以使用
document.querySelector（'.ag header cell:last child'）.children[1]获取嵌套的子元素，但现在在标题中导航时，它不允许在将焦点切换到主体单元格之前导航到最后一个标题单元格。有什么想法吗？我也更新了plunkr链接。我真的很困惑你想做什么，但这里是我的发现。1.查看标题单元格对您没有多大帮助。2. 
document.activeElement
仅在编辑字段时有效（在这种情况下，不会触发ArrowRight处理程序）。3.我在任何地方都看不到
“焦点可见”
类，我看到的是
“ag cell focus”
和
“ag cell no focus”
。看起来这段代码有三个不同的方向。你到底想做什么？很抱歉给你带来困惑。我知道了如何找到最后一个标题单元格，但现在它会自动将焦点转移到主体单元格，而不会首先聚焦到最后一个标题单元格，然后允许用户导航到最后一个标题单元格，然后再次按向右箭头键，继续向下移动到主体单元格。希望这有助于澄清问题。