Javascript 获取DOM'的有序列表；s焦点顺序

我理解DOM有时是一个动态的野兽。但是，我想知道是否有一个简单的调用可以在任何给定时间获得DOM的可聚焦元素/节点的有序列表？这显然将包括所有具有

tabindex

声明但不是

-1

的节点，以及默认情况下可聚焦的所有节点

---

TY.

没有内置的函数来完成此操作，但是我相信下面的函数会如预期的那样工作

正如您所见，这并不是完全直截了当的，因为您必须考虑在父元素上设置了

visibility:hidden

和

display:none

。我还必须为

contenteditable

添加一个变通方法，因为它是可聚焦的，但在JavaScript中显示为

tabindex=“-1”

，即使没有设置

tabindex

，这打破了我检查内容的方式

我有效地做的是使用CSS选择器

focusableItems

获取所有可聚焦的元素

然后，我将这些项目转换为一个数组，同时删除带有

tabindex=“-1”

的任何项目以及隐藏的任何项目

最后，我们在开始时使用正值

tabindex

对结果项数组进行排序，然后按照DOM顺序对所有其他项进行排序

边缘有点粗糙，但似乎通过了我能想到的所有测试。不幸的是，

getComputedStyle

是我能想到的解释父项上的

可见性：隐藏的
的唯一方法，因为这是最难解决的场景


var focusableItems='a[href]，area[href]，input:not（[disabled]），select:not（[disabled]），textarea:not（[disabled]），button:not（[disabled]），[tabindex]：not（[disabled]），[contentedite=true]：not（[disabled]）；
var items=document.queryselectoral（focusableItems）；
var itemsList=[]；
对于（var i=0；i而言，没有内置的函数来实现这一点，但是我相信下面的方法会像预期的那样工作

正如您所见，这并不完全是直截了当的，因为您必须考虑在父元素上设置了
可见性：hidden
和
显示：none
。我还必须为
contenteditable
添加一个变通方法，因为它是可聚焦的，但它本身显示为
tabindex=“-1”
在JavaScript中，即使没有设置
tabindex
，这打破了我检查东西的方式

我有效地做的是使用CSS选择器
focusableItems
获取所有可聚焦的元素

然后，我将这些项目转换为一个数组，同时删除带有
tabindex=“-1”
的任何项目以及隐藏的任何项目

最后，我们在开始时使用正值
tabindex
对结果项数组进行排序，然后按照DOM顺序对所有其他项进行排序

边缘有点粗糙，但似乎通过了我所能想到的所有测试。遗憾的是，我能想到的唯一方法是解释父项的可见性：隐藏，因为这是最难解决的情况


var focusableItems='a[href]，area[href]，input:not（[disabled]），select:not（[disabled]），textarea:not（[disabled]），button:not（[disabled]），[tabindex]：not（[disabled]），[contentedite=true]：not（[disabled]）；
var items=document.queryselectoral（focusableItems）；
var itemsList=[]；
对于（var i=0；它不是现成的函数，您当然可以编写自己的函数来过滤所有需要的元素。您尝试过这样做吗？我还没有尝试过，因为我一直在等待，看看是否有现成的方法可以做到这一点（或者至少是非常类似于现成解决方案的方法）。如果答案是我需要创建自定义逻辑，那么我认为显而易见的解决方案是递归查询DOM树，查找
tab index
属性以及默认情况下可聚焦的特定标记，然后根据它们的数值使用
tab index
es对元素重新排序（因为它会影响优先顺序）？是的，这是如何实现的。干杯。感谢您的回答并最终回答我的问题：）没有现成的函数，您当然可以编写自己的函数来过滤所有需要的元素。您尝试过这样做吗？我还没有尝试过，因为我一直在等待，看看是否有现成的方法可以做到这一点（或者至少是非常类似于现成解决方案的方法）。如果答案是我需要创建自定义逻辑，那么我认为显而易见的解决方案是递归查询DOM树，查找
tab index
属性以及默认情况下可聚焦的特定标记，然后根据它们的数值使用
tab index
es对元素重新排序（因为它会影响优先顺序）？是的，这是如何实现的。干杯。感谢您的回答并最终回答我的问题：）