Html:对Web页面元素的绝对唯一引用方法

xp晴天无悔

xp晴天无悔

2016-02-19 21:12

今天图老师小编给大家展示的是Html:对Web页面元素的绝对唯一引用方法,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

    我们知道要在Web页面中引用一个HTML元素,最简单的方法就是使用getElementById方法,或其类似的一组getElementsByXxx方法。可是这里需要注意的是,这些方法其实都不能完全绝对的唯一确定对一个元素的引用。

    至于getElementsByXxx我们不说了,它本身就是getElements,很明白了,那么getElementById也不能唯一确定一个元素吗?当然是,不能。由于html的不严格性,在同一页面中重复元素的id是被允许的。关于id的更多细节问题,请参考:细说HTML元素的ID和Name属性的区别,一文。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

    那么怎么才能唯一的确定对一个元素的引用呢?使用DOM之间的引用结构来查找?这个方法虽然是行的,但是可操作性是在是太差了。这里需要说说我原来介绍过的html属性uniqueID,它是微软为HTML元素扩充的专有属性,不遵循W3C的规范。这个uniqueID有一些undocumented的特性,uniqueID其实也是和id类似的一套元素表示体系,只是它是纯客户端的标示方案。它的一些细节在前面一个链接中已经介绍了,下面我们主要说说它的特性。

    由于它是元素的表示体系,那么它也因该和id的特性一样啰?实际上确实是这样,除了uniqueID的生成方式和id完全不同外,uniqueID其它表现和id是一样的。我们可以通过这个uniqueID直接引用元素,就像id一样,只是由于uniqueID是动态生成的,所以我们也只能动态使用这个uniqueID,而不能以literal形式来使用。下面是一个使用示例:

var g_ELEMENTS = {};
var span = document.createElement('SPAN');
document.body.appendChild(span);
g_ELEMENTS[span.uniqueID] = span;
    这样我们就通过uniqueID将span缓存起来了,已有要引用这个span,就可以这样:
var elements = g_ELEMENTS.GetExpandoKeys();
for ( var i=0 ; i elements.length ; ++i )
{
    var element = eval(elmenets[i]);
    // todo: other logic
}
    除了使用eval来引用这个uniqueID外,getElementById也有一个undocumented的特性,就是它也支持uniqueID,这样一来,我们就可以使用getElementById(elements[i])来绝对唯一的引用一个页面元素。

    可能有人会疑惑,这个uniqueID到底有什么用啊?其实在动态生成大量页面元素时,使用uniqueID可以非常方面的为元素生成真正的unique的id,它的意义就在于可以将这些动态元素cache起来,做统一管理。特别是在实现动态在的TreeView时,如果合理使用uniqueID到来的好处,就可以避免很多需要对树进行反复递归便利才能完成的工作。还有,uniqueID是IE的DOM提供的原生解决方案,比自己去做unique标示要方面高效的多,并且还利于对元素检索。

    参考信息:GetExpandoKeys(),另外就是本文不适合FireFox及其它非IE内核浏览器。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

Html:对Web页面元素的绝对唯一引用方法

Web开发
Html:对Web页面元素的绝对唯一引用方法

用JavaScript保存HTML页面中元素

Web开发
用JavaScript保存HTML页面中元素

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用Session对Web页面进行保护

Web开发
用Session对Web页面进行保护

PHP4引用文件语句的对比

PHP
PHP4引用文件语句的对比

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

绝对的温柔 唯一的温柔 只对你温柔

电脑入门
绝对的温柔 唯一的温柔 只对你温柔

直接双击页面元素进行修改的HTML代码

Web开发
直接双击页面元素进行修改的HTML代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Html:全面认识了解网页中附加码的作用

Html:全面认识了解网页中附加码的作用

Oracle复合数据类型(4)

Oracle复合数据类型(4)
下拉加载更多内容 ↓