Javascript 如何使用vanillaJS高效地查找html节点之间的关系_Javascript_Dom

Javascript 如何使用vanillaJS高效地查找html节点之间的关系

javascript dom

Javascript 如何使用vanillaJS高效地查找html节点之间的关系,javascript,dom,Javascript,Dom,我在DOM中的不同位置和深度有几个html节点。我需要根据它们在DOM中的位置对它们进行有效排序，而不管它们的深度如何它应该使用VanillaJS、NojQuery等实现例如，给定以下树： <body> <div> <div id="a1b"></div> <div> <div> <div id="c1d"></div> <

我在DOM中的不同位置和深度有几个html节点。我需要根据它们在DOM中的位置对它们进行有效排序，而不管它们的深度如何

它应该使用VanillaJS、NojQuery等实现

例如，给定以下树：

<body>
   <div>
      <div id="a1b"></div>
   <div>
      <div>
         <div id="c1d"></div>
      </div>
      <div id="e1f"></div>
   </div>
   <div id="g1h"></div>
</body>

假设我们有一个函数，它以随机顺序接收四个ID为的html元素，该函数应该按照DOM中的出现顺序返回这些元素，即类似于以下内容的数组：

[a1b节点、c1d节点、e1f节点、g1h节点]

只需使用：

，优先是：

const nodes = [
    document.getElementById('a1b'),
    document.getElementById('c1d'),
    document.getElementById('e1f'),
];

nodes.sort((a, b) =>
    a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ?
        -1 : 1);

const shuffle=arr=>{
for（设i=0；inode.nodeName））；
nodes.sort（（a，b）=>
a、 比较文档位置（b）和节点。文档位置如下？
-1 : 1);
log（nodes.map（node=>node.nodeName））

，优先考虑：
const nodes = [
    document.getElementById('a1b'),
    document.getElementById('c1d'),
    document.getElementById('e1f'),
];

nodes.sort((a, b) =>
    a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ?
        -1 : 1);


const shuffle=arr=>{
for（设i=0；inode.nodeName））；
nodes.sort（（a，b）=>
a、 比较文档位置（b）和节点。文档位置如下？
-1 : 1);
log（nodes.map（node=>node.nodeName））
我认为这是一个很好的方法：

var randomNodes=[document.getElementById（'c1d'）、document.getElementById（'a1b'）、document.getElementById（'e1f'）]
var sorted=document.querySelectorAll（randomNodes.map（el=>'#'+el.id）.join（'，'）；
控制台日志（已排序）；
//如果需要标准阵列：
log（[…排序]）
我认为这是一个很好的方法：

var randomNodes=[document.getElementById（'c1d'）、document.getElementById（'a1b'）、document.getElementById（'e1f'）]
var sorted=document.querySelectorAll（randomNodes.map（el=>'#'+el.id）.join（'，'）；
控制台日志（已排序）；
//如果需要标准阵列：
log（[…排序]）

您不需要检查所包含的，当设置该项时，随后的将设置为well@Bergi：谢谢！您不需要检查
包含的，当设置该项时，随后的将设置为well@Bergi：谢谢！确实是一种很好的方法，我知道querySelectorAll在DOM中按元素的顺序返回元素？文档说它通过“使用文档节点的深度优先的预先顺序遍历”返回它们，所以这就是它的意思？。。。此外，我还想知道，这种方法或建议的ComparedOccumentPosition方法有什么效率更高？确实是一种不错的方法，我知道querySelectorAll在DOM中按元素的顺序返回元素？文档说它通过“使用文档节点的深度优先的预先顺序遍历”返回它们，所以这就是它的意思？。。。另外，我想知道这个或建议的ComparedDocumentPosition方法的效率会更高