索引 dom 元素

Question

我正在尝试在 javascript/jquery 中实现一个算法（递归），它遍历 DOM 和 returns 我每个 HTML 元素的索引，包括parents，兄弟姐妹和 children。然后画一棵树DOM。我需要通过将索引 attr 添加到索引为字符串的元素来索引每个元素。例如：

<html>
<...>
<body>
<div index="1">
<div index="1.1">
<h2 index = "1.1.1">some text1</h2>
<h2 index = "1.1.2">some text</h2>
</div>
</div>
<div index="2">
<table index="2.1">
<tr index="2.1.1">
<td index="2.1.1.1">some cell</td>
<td> index = "2.1.1.2">some cell</td>
</tr>
<tr index="2.1.2">
<td index="2.1.2.1">some cell</td>
</tr>
</table>
</div>
<div index="3">
<h1 index="3.1">some text</h1>
</div>
</body>
</html>

实现该目标的最佳方法是什么？有什么想法吗？

Answer 1

通过简单的迭代你可以实现这个

function loop(el, isChild){
  for(var i=0; i<el.children.length;i++){
    var child = el.children[i];
    child.index = (isChild?(el.index + '.'):'') + (i+1);
    loop(child,false);
  }
}

loop(document.body);

索引 dom 元素

Indexing the dom elements

html

javascript

tree

recursion

dom