返回所有的DOM元素的阵列,通过深度排序 [英] Return an array of all the DOM elements, sorted by depth

查看:130
本文介绍了返回所有的DOM元素的阵列,通过深度排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在Javascript中如何创建DOM中的所有元素,其深度有序的数组,所以这样的事情...

In Javascript How do you create an Array of all the elements in the DOM, ordered by their depth, so it something like this...

<body>
  <1stChild>
    <1stGrandchild>
  <2ndChild>
  <3rdChild>
    <2ndGrandchild>
    <3rdGrandchild>
      <1stGreatgrandchild>
      <2stGreatgrandchild>
    <4thGrandchild>
  <4thChild>
  <etc etc>

是这样的...

would look like this...

["body", "1stChild", "2ndChild", "...", "lastChild", "1stGrandchild", "...", "lastGrandchild", "1stGreatgrandchild", "...", "lastGreatgrandchild" "etc. etc."]

我有一个jQuery 解决方案但想一个纯JavaScript有一个

I have a jQuery solution but would like a pure javascript one

推荐答案

好吧,我理解了它自己,它是pretty到底简单。

Ok, I figured it out myself, it was pretty simple in the end.

    // Every Element in the DOM.

var allElements = document.getElementsByTagName('*'),

    // All the Element's children sorted by depth, 
    // ie. body, then body's children, grandchildren,
    // so on and so forth.

    sortedByDepth = [];

    // for every element

for(var i = 0; i<allElements.length; ++i) {

    // grab Its children

    var allChildren = allElements[i].children;

    // for every grabbed child

    for(var j = 0; j<allChildren.length; ++j){

        // Add it to the sortedByDepth array

        sortedByDepth = sortedByDepth.concat(allChildren[j]);
    }   
}
console.log(sortedByDepth);

这篇关于返回所有的DOM元素的阵列,通过深度排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆