0

Как правильно обойти все элементы DOM на странице (или во фрейме) и вывести их дерево с помощью js?

2 ответа 2

3

Вам нужно использовать 2 свойства DOM элементов :

  1. firstElementChild - первый потомок текущего элемента
  2. nextElementSibling - следующий потомок родительского элемента

Вот пример реализации ( универсальный, для подобных структур ):

tab_buff = [];
function tab( level ){

  if ( tab_buff[level] ) return tab_buff[level];

  var i, res = [];

  for (i = 0; i < level; i++ ) res.push("|");
  res.push("-");

  return tab_buff[level] = res.join('');
}

function print_tree( root, child_prop, next_prop ){
  var stack = [],
      level = 0,
      curr = root,
      res = [],
      type = true;

  while( curr ){
    if ( type ) res.push( tab(level) + curr.tagName );

    if ( type && curr[child_prop] ){
      type = true;
      level++;
      stack.push( curr );
      curr = curr[child_prop];
    }
    else if ( curr[next_prop] ){
      type = true;
      curr = curr[next_prop];
    }
    else{
      type = false;
      level--;
      curr = stack.pop();
    }
  }

  return res.join("\n");
}

res = print_tree(
  document.getElementsByTagName('html')[0],
 'firstElementChild',
 'nextElementSibling'
);

в итоге в res будет что-то типа:

-HTML
|-HEAD
||-TITLE
||-STYLE
||-SCRIPT
||-SCRIPT
|-BODY
||-TABLE
|||-TBODY
||||-TR
|||||-TD
||||||-A
||||-TR
|||||-TD
||||||-FORM
|||||||-INPUT
|||||||-INPUT
|||||||-INPUT
||-SCRIPT
2
  • Надеялся на наличие унифицированного способа, функции. Но по видимому придётся-таки обходить через цикл.
    – Getans
    Commented 6 нояб. 2011 в 14:52
  • Благодарю за рабочий пример
    – Getans
    Commented 6 нояб. 2011 в 15:09
0

Например вы хотите обойти все элементы с тегом "a", то есть все ссылки. Тогда код будет иметь следующий вид:

var tag = 'a',//присваиваем переменной tag название нашего тега
    elems = document.getElementsByTagName(tag), //присваиваем переменной elems все элементы с название тега 'a'
    elem,//объявляем переменную elem, в ней будем хранить каждый элемент массива при его обходе
    k;//переменная k будет содержать порядковый номер элемента в массиве начиная с 0
for (k in elems) //для 
{
    elem=elems[k];
    //здесь может быть ваш код.
}

Напишите, что именно вам нужно, тогда я смогу ответить более конкретно.

2
  • 1. В вопросе написано что именно нужно. 2. Массив ( в т.ч. NodeList ) нельзя обходить функцией for (k in elems) 3. Зачем копировать elems?
    – timka_s
    Commented 6 нояб. 2011 в 14:36
  • 1
    pastebin.com/T1jeQXtA здесь код рекурсивной функции. Пример использования getTree(document.body); Commented 6 нояб. 2011 в 15:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.