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

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

那么怎么才能唯一的确定对一个元素的引用呢?使用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标示要方面高效的多,并且还利于对元素检索。

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

对Web页面元素的绝对唯一引用方法相关推荐

  1. java实现页面高效刷新_selenium高效应对Web页面元素刷新的实例讲解

    当我们在页面上进行selenium.type()或者selenium.click()操作的时候,往往需要需要等待一个元素的出现,对于一般的网页,当我们进入一个新页面的时候,往往会使用selenium. ...

  2. html调用rpst 源码_在web页面中播放rtsp直播数据流方法

    WEB播放RTSP直播数据流方法 附录一些RTSP测试地址: 1.rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov 一段动画片 2.rtsp: ...

  3. 将页面元素隐藏的10种方法

    在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...

  4. html 页面元素id不唯一,规定html元素的唯一的id属性

    实例 通过 JavaScript 利用 id 属性来改变一段文本: function change_header() { document.getElementById("myHeader& ...

  5. web页面-元素定位

    web自动化测试核心内容: 元素定位 网页操作 等待 pytest + selenium 项目实战 1.为什么要元素定位  元素定位是为了操作浏览器,如输入内容,点击按钮等,就是手工做的,自动化都可以 ...

  6. 功能测试中web页面元素包含的因素

    1.UI 1)各个页面的样式风格是否统一: 2)各个页面的大小是否一致:同样的LOGO图片在各个页面中显示是否大小一致:页面及图片是否居中显示: 3)各个页面的title是否正确: 4)栏目名称.文章 ...

  7. selenium 实现循环点击_-循环点击遇到的坑(每次点击后返回,页面元素都会变化的解决方法)...

    # 前言 selenium定位一组元素,批量操作循环点击的时候会报错:Element not found in the cache - perhaps the page has changed sin ...

  8. 针式打印机打印WEB页面字体不清晰,解决方法

    针式打印机打html页面打印,好像只认识黑体,其他字体文字打印就不清晰了,把打印的字体改为黑体,解决.同时颜色设置为黑色. font-family: "黑体", "微软雅 ...

  9. javascript和jquery实现页面元素显示/隐藏切换的方法

    一.javascript实现 方法一: document.getElementById("idname").style.visibility="hidden"; ...

最新文章

  1. 90 后女科学家,四年完成清华大学硕博连读,解决多个世界级难题
  2. Science:AI领域那么多引人注目的「进展」,竟是无用功
  3. 【nginx】从主页搭建看nginx常用配置
  4. c语言注释的开始标记符和结束标记符分别为,C语言程序设计填空题
  5. STM32 进阶教程 13 – FLASH的读写操作
  6. 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
  7. FTP的dos命令使用方法
  8. 根据location地址,在导航栏高亮显示当前页面
  9. python中的range与xrange
  10. WebService远程调试
  11. 新颖训练方法——用迭代投影算法训练神经网络
  12. sqlserver200864位下载_SQL2008下载 SQL Server 2008 R2 简体中文版(64位) 下载-脚本之家
  13. 2022电工(技师)考试题库模拟考试平台操作
  14. 华为网络设备交换机路由器查看MAC地址表项命令方法
  15. 京东:狙击凡客?绝无此事!
  16. 编译原理实验三 自下而上语法分析
  17. nvme固态硬盘开机慢_别让谣言害了你!关于固态硬盘的谣言以及使用误区 NVMe固态硬盘卡慢怎么办 NVMe固态硬盘卡慢解决方法【详解】-宝商在线...
  18. 相机去畸变软件OCamCalib的使用方法
  19. 大数据框架Hadoop篇之Hadoop入门
  20. LHS和RHS的理解

热门文章

  1. SQL连接查询和嵌套查询详解
  2. HTML5视频的使用总结
  3. ThinkPHP5整合LayUI编辑器图片上传
  4. c++重载后置++和--
  5. 军规13 降低流量和电量消耗
  6. timestamp的两个属性:CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP
  7. shell脚本中echo显示内容带颜色
  8. 看看 Grunt 的源码(一):grunt-cli 源码解析
  9. 最短编辑距离 python_最短编辑距离算法实现
  10. python -m uiautomator2 init 报错_Python|实现属于自己的数据类型