[英]DOM tree traversal
我最近面试了 Facebook 的前端工程师职位。 对于我的手机屏幕,我提出了以下问题:给定 DOM 树中的一个节点,从相同的 DOM 树中找到相同位置的节点。 为清楚起见,请参见下图。
A B
O O
|\ |\
O O O O
/|\ /|\
O O O O O O
\ \
O O
这是我的解决方案,我想知道我可以做些什么来改进/优化它。
var rootA, rootB;
function findNodeB(nodeA) {
// Variable to store path up the DOM tree
var travelPath = [];
// Method to travel up the DOM tree and store path to exact node
var establishPath = function(travelNode) {
// If we have reached the top level node we want to return
// otherwise we travel up another level on the tree
if (travelNode === rootA) {
return;
} else {
establishPath(travelNode.parentNode);
}
// We store the index of current child in our path
var index = travelNode.parentNode.childNodes.indexOf(travelNode);
travelPath.push(index);
}
var traverseTree = function(bTreeNode, path) {
if(path.length === 0) {
return bTreeNode;
} else {
traverseTree(bTreeNode.childNodes[path.pop()], path);
}
}
establishPath(rootB, nodeA);
return traverseTree(rootB, travelPath);
}
由于至少 Axel 对迭代解决方案表现出兴趣,因此它是:
给定具有相同结构的两棵树,以及第一棵树中的一个指定节点,在第二棵树中定位具有相同位置的节点。
如果我们没有关于两棵树的其他信息,那么每个节点的位置可以表征为从根节点开始的路径,其中路径中的每一步都被指定为 childNode 数组的索引。
function indexOf(arrLike, target) {
return Array.prototype.indexOf.call(arrLike, target);
}
// Given a node and a tree, extract the nodes path
function getPath(root, target) {
var current = target;
var path = [];
while(current !== root) {
path.unshift(indexOf(current.parentNode.childNodes, current));
current = current.parentNode;
}
return path;
}
// Given a tree and a path, let's locate a node
function locateNodeFromPath(root, path) {
var current = root;
for(var i = 0, len = path.length; i < len; i++) {
current = current.childNodes[path[i]];
}
return current;
}
function getDoppleganger(rootA, rootB, target) {
return locateNodeFromPath(rootB, getPath(rootA, target));
}
编辑:正如 Blue Skies 所观察到的,childNodes 没有 .indexOf()。 使用 Array.prototype.indexOf.call() 更新
这是并行遍历解决方案
function findDomNodeInTree(rootA, rootB, targetNode) {
if (rootA === targetNode){
return rootB;
}
let nodeB = null;
for (let i=0; i<rootA.childNodes.length && nodeB === null; i++){
nodeB = findDomNodeInTree(rootA.childNodes[i], rootB.childNodes[i], targetNode);
}
return nodeB;
}
它的时间复杂度是 O(N),在最坏的情况下,我们需要遍历整棵树。
我不认为它比首先找到路径的解决方案效率低。 在每个级别都有一个对indexOf
的调用,它可能需要遍历该级别上的所有节点才能找到索引。
您可以使用Array.from
(在 ES6 中标准化)而不是Array.prototype.indexOf.call
:
Array.from(travelNode.parentNode.childNodes).indexOf(travelNode);
我会并行遍历两棵树,当我到达 treeA 中的节点时,返回并行节点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.