js中查找最近的共有祖先元素的实现代码
更新时间：2010年12月30日 22:32:49 作者：
司徒正美给出的题，也尝试着写一下。希望大家多多交流。
先来看概念，首先DOM是一棵树，其根节点是Document，大致可以用下图来表示：
所谓“最近的共有祖先元素”，是指给定一系列元素，找出在树中深度最大的，但同时为所有这些元素的祖先元素的元素。
比如上图中，I和G的结果为C，G和H的结果为A，D和E的结果为html，C和B的结果为html等。
测试驱动
对于偏逻辑的题，并没有十足的把握函数是正确的，因此还是先构造测试的用命，力求让函数通过测试。
本次就以上图的结构作为DOM结构，A表示body，B表示head，其他节点均使用div元素，同时以上文中所说的作为测试的输入和输出，先构造一下测试：
function test() {
var result;
result = find('i', 'g');
result.id !== 'c' && alert('fail (i, g)');
result = find('g', 'h');
result.id !== 'a' && alert('fail (g, h)');
result = find('d', 'e');
result.nodeName.toLowerCase() !== 'html' && alert('fail (d, e)');
result = find('c', 'b');
result.nodeName.toLowerCase() !== 'html' && alert('fail (c, b)');
}
基本逻辑
这次的逻辑大致是这样的：
1、针对每个给定的元素，从父元素到document依次向上遍历。
2、对遍历过程中经过的每个元素，保存到一个有序的map中，以元素为键，以遍历到的次数为值。
2、最后遍历map，找同第一个值与给定元素个数相同的项，就是第一个被所有元素的遍历都经过的元素，也即最近的共同祖先元素了。
细节问题
在实际过程中，对map的构建比较重要，这里涉及到2个问题：
1、map不能直接以元素作为键，必须转换为合适的基元类型（如number, string, Regex等）。
2、chrome对object中的键会有自动排序，因此尽量避免使用number类型作为键。
对于第一个问题，必须给元素绑定一个合适的字段，起到唯一性标识符的作用。好在HTML5提供了data-*属性，使DOM的元数据承载能力有了很大的提高，可以大胆地添加希望的属性了。
对于第二个问题，本身也不难，生成的标识符避开number就行了，方便的方法是加个下划线，或者使用String.fromCharCode转成字符，无论怎么样都无所谓。
实现代码
代码有点长，主要是个人比较喜欢偏JAVA的风格，每一个语句每一个分支都清清楚楚，不喜欢用&&或者||来处理条件分支，所以有很多行只有一个大括号之类的情况，其实真正有效的代码还是精简的。懒得装类似toggle之类的插件，也不想看到滚动条，就随便扔在这了。
function find() {
var length = arguments.length,
i = 0,
node, //当前节点
parent, //父节点
counter = 0,
uuid, //给DOM的唯一标识符
hash = {}; //最后结果的map
//对每一个元素，向上遍历至document
//这个双层的循环是不可避免的
for (; i < length; i++) {
//获取node
node = arguments[i];
if (typeof node == 'string') {
node = document.getElementById(node);
}
//向上遍历
while (parent = node.parentElement || node.parentNode) {
//到document就停下来，不然就是死循环
if (parent.nodeType == 9) {
break;
}
//获取或添加一下标识符
uuid = parent.getAttribute('data-find');
if (!uuid) {
uuid = '_' + (++counter); //避免chrome对hash重排序
parent.setAttribute('data-find', uuid);
}
//增加计数
if (hash[uuid]) {
hash[uuid].count++;
}
else {
hash[uuid] = {node: parent, count: 1};
}
node = parent;
}
}
//hash中只存有各节点向上遍历经过的父节点，不应该很大
//因此这个循环是比较快的
for (i in hash) {
if (hash[i].count == length) {
return hash[i].node;
}
}
};
点评
测试没问题，但测试用例是否完善实在不好说，期待网友帮我找出问题来，对于逻辑型的实在是没啥自信说100%没问题。
对于取父元素，习惯性兼容IE写成parentElement || parentNode，这是因为IE的一个BUG，当一个元素刚被创建出来但未进入DOM时，parentNode是不存在的。不过本次函数保证节点在DOM树中，其实parentElement就没有必要了。所以有时候习惯性的兼容代码也不见得就一定是好事，最适合当前环境的代码才是好代码。
虽然说2重循环不可避免，但总隐隐感觉循环还是有办法在特定情况下少做点事，比如向上遍历的时候发现某个元素已经不可能是所有元素的共有祖先了，那么就不要再去递增count值了。
最后的for..in循环有没有办法省掉呢？在上面的2重循环中有没有办法实时地就通过一个变量始终保存最合适的节点呢？
所谓“最近的共有祖先元素”，是指给定一系列元素，找出在树中深度最大的，但同时为所有这些元素的祖先元素的元素。
比如上图中，I和G的结果为C，G和H的结果为A，D和E的结果为html，C和B的结果为html等。
测试驱动
对于偏逻辑的题，并没有十足的把握函数是正确的，因此还是先构造测试的用命，力求让函数通过测试。
本次就以上图的结构作为DOM结构，A表示body，B表示head，其他节点均使用div元素，同时以上文中所说的作为测试的输入和输出，先构造一下测试：
复制代码 代码如下:
function test() {
var result;
result = find('i', 'g');
result.id !== 'c' && alert('fail (i, g)');
result = find('g', 'h');
result.id !== 'a' && alert('fail (g, h)');
result = find('d', 'e');
result.nodeName.toLowerCase() !== 'html' && alert('fail (d, e)');
result = find('c', 'b');
result.nodeName.toLowerCase() !== 'html' && alert('fail (c, b)');
}
基本逻辑
这次的逻辑大致是这样的：
1、针对每个给定的元素，从父元素到document依次向上遍历。
2、对遍历过程中经过的每个元素，保存到一个有序的map中，以元素为键，以遍历到的次数为值。
2、最后遍历map，找同第一个值与给定元素个数相同的项，就是第一个被所有元素的遍历都经过的元素，也即最近的共同祖先元素了。
细节问题
在实际过程中，对map的构建比较重要，这里涉及到2个问题：
1、map不能直接以元素作为键，必须转换为合适的基元类型（如number, string, Regex等）。
2、chrome对object中的键会有自动排序，因此尽量避免使用number类型作为键。
对于第一个问题，必须给元素绑定一个合适的字段，起到唯一性标识符的作用。好在HTML5提供了data-*属性，使DOM的元数据承载能力有了很大的提高，可以大胆地添加希望的属性了。
对于第二个问题，本身也不难，生成的标识符避开number就行了，方便的方法是加个下划线，或者使用String.fromCharCode转成字符，无论怎么样都无所谓。
实现代码
代码有点长，主要是个人比较喜欢偏JAVA的风格，每一个语句每一个分支都清清楚楚，不喜欢用&&或者||来处理条件分支，所以有很多行只有一个大括号之类的情况，其实真正有效的代码还是精简的。懒得装类似toggle之类的插件，也不想看到滚动条，就随便扔在这了。
复制代码 代码如下:
function find() {
var length = arguments.length,
i = 0,
node, //当前节点
parent, //父节点
counter = 0,
uuid, //给DOM的唯一标识符
hash = {}; //最后结果的map
//对每一个元素，向上遍历至document
//这个双层的循环是不可避免的
for (; i < length; i++) {
//获取node
node = arguments[i];
if (typeof node == 'string') {
node = document.getElementById(node);
}
//向上遍历
while (parent = node.parentElement || node.parentNode) {
//到document就停下来，不然就是死循环
if (parent.nodeType == 9) {
break;
}
//获取或添加一下标识符
uuid = parent.getAttribute('data-find');
if (!uuid) {
uuid = '_' + (++counter); //避免chrome对hash重排序
parent.setAttribute('data-find', uuid);
}
//增加计数
if (hash[uuid]) {
hash[uuid].count++;
}
else {
hash[uuid] = {node: parent, count: 1};
}
node = parent;
}
}
//hash中只存有各节点向上遍历经过的父节点，不应该很大
//因此这个循环是比较快的
for (i in hash) {
if (hash[i].count == length) {
return hash[i].node;
}
}
};
点评
测试没问题，但测试用例是否完善实在不好说，期待网友帮我找出问题来，对于逻辑型的实在是没啥自信说100%没问题。
对于取父元素，习惯性兼容IE写成parentElement || parentNode，这是因为IE的一个BUG，当一个元素刚被创建出来但未进入DOM时，parentNode是不存在的。不过本次函数保证节点在DOM树中，其实parentElement就没有必要了。所以有时候习惯性的兼容代码也不见得就一定是好事，最适合当前环境的代码才是好代码。
虽然说2重循环不可避免，但总隐隐感觉循环还是有办法在特定情况下少做点事，比如向上遍历的时候发现某个元素已经不可能是所有元素的共有祖先了，那么就不要再去递增count值了。
最后的for..in循环有没有办法省掉呢？在上面的2重循环中有没有办法实时地就通过一个变量始终保存最合适的节点呢？
相关文章
这篇文章主要介绍了js动态生成唯一id的两种方法,需要的朋友可以参考下2023-05-05
本文给大家分享基于js和canves实现点击按钮水波纹效果，效果非常逼真，对此感兴趣的朋友一起看看吧2016-09-09
PHP是一种动态类型的编程语言,它支持面向对象编程,在PHP中,派发指在运行时确定要调用的方法或函数的过程,派发机制允许根据实际对象的类型来选择要执行的方法,这种灵活性使得PHP可以实现多态性,本文将给大家介绍php的派发机制是怎么实现的,需要的朋友可以参考下2023-10-10
在本篇文章里我们给大家分享了关于ajax实现点击加载更多数据图片的相关代码知识点，有兴趣的朋友们参考下。2018-10-10
这篇文章主要为大家详细介绍了微信小程序实现轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容2022-02-02
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
这篇文章主要介绍了Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下2022-08-08
在做用户实名验证时,常会用到身份证号码的正则表达式及校验方案,下面这篇文章主要给大家介绍了关于正则表达式校验身份证号码的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
最新评论