dom tree

facebook

by Paco86

HTML

<!-- 
give two dom tree, the structure of two tree are same.
give one node in tree one, find it's matching node in tree two. 
-->

<div id="node1">
  <div></div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div>
        <div id="child1">child 1 content</div>
      </div>
      <div></div>
    </div>
  </div>
</div>

<div id="node2">
  <div></div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div>
        <div>child 2 content</div>
      </div>
      <div></div>
    </div>
  </div>
</div>

CSS

/*   A               B

    / \             / \
    O   O         O   O
        /|\          /|\
       x O O        y O O

y = find(A, B, x);


有两个dom，A和B，要求返回B中所对应的(x在A中的值)，也就是说，找出x在A中的位置，然后返回在B中对应位置的值。

这个得要求复习一下dom的api，以前我们老用框架，特别是jQuery，所以一些基本的东西平时也没接触到。例如：

node.children
node.nextSibling
node.parentNode

这个题目可以用递归做，但是费时间，平均要遍历一半nodes，那用什么方法比较好呢，这里给大家留个小作业吧。

另外一个就是node.children是一个类似于array但又不是array，如何变成array？
Followup：如果只是找index的话，不需要生成新array，在node.children里面如何找到某个点的index？ */

JavaScript

function findSimilarNode(element, root) {
	var path = [];
  
  var pointer = element;
	while (pointer.parentNode) {
  	var index = [...pointer.parentNode.children].indexOf(pointer);
  	path.push(index);
  	pointer = pointer.parentNode;
  }
  
  pointer = root;
  while (path.length) {
  	pointer = pointer.children[path.pop()];
  }
  
  return node;
}


function findSimilarNode(root1, root2, element) {
	var path = [];
  var pointer = element;
  
  while(pointer !== root1) {
  	/* var index = [...pointer.parentNode.children].indexOf(pointer); */
		var index = Array.prototype.indexOf.call(pointer.parentNode.children, pointer);
		path.push(index);
    pointer = pointer.parentNode;
  }
  
  pointer = root2;
  while(path.length > 0) {
  	pointer = pointer.children[path.pop()];
  }
  
  console.log(pointer);
  return pointer;
}


var r1 = document.getElementById('node1');
var r2 = document.getElementById('node2');
var element = document.getElementById('child1');
findSimilarNode(r1, r2, element);