Как правильно обойти все элементы DOM на странице (или во фрейме) и вывести их дерево с помощью js?
2 ответа
Вам нужно использовать 2 свойства DOM элементов :
- firstElementChild - первый потомок текущего элемента
- 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
-
Надеялся на наличие унифицированного способа, функции. Но по видимому придётся-таки обходить через цикл.– GetansCommented 6 нояб. 2011 в 14:52
-
Например вы хотите обойти все элементы с тегом "a", то есть все ссылки. Тогда код будет иметь следующий вид:
var tag = 'a',//присваиваем переменной tag название нашего тега
elems = document.getElementsByTagName(tag), //присваиваем переменной elems все элементы с название тега 'a'
elem,//объявляем переменную elem, в ней будем хранить каждый элемент массива при его обходе
k;//переменная k будет содержать порядковый номер элемента в массиве начиная с 0
for (k in elems) //для
{
elem=elems[k];
//здесь может быть ваш код.
}
Напишите, что именно вам нужно, тогда я смогу ответить более конкретно.
-
1. В вопросе написано что именно нужно. 2. Массив ( в т.ч. NodeList ) нельзя обходить функцией for (k in elems) 3. Зачем копировать elems?– timka_sCommented 6 нояб. 2011 в 14:36
-
1pastebin.com/T1jeQXtA здесь код рекурсивной функции. Пример использования getTree(document.body); Commented 6 нояб. 2011 в 15:04