挺好玩的uniqueID&uniqueNumber属性

简介:
 在Web页中的每个HTML元素都一个ID属性,ID作为其标示,在我们的普通理解中它应该是unique的。可是HTML元素的ID属性是可写的,这就造成了我们很可能人为的使ID的重复。按么如果ID重复了怎么办呢?我们又怎么来给HTML元素弄一个唯一的标示呢?

    由于IE对格式混乱(不完整的或有错嵌套关系)的HTML代码由极好的容错性,对于HTML元素的ID重复问题对它来说简直就是小菜一碟。如果出现这种情况,比如:
  < div  id ="divText" >The first line. </ div >
  < div  id ="divText" >The second line. </ div >

    这时的divText就不是一个对DIV元素的引用了,而变成了一个数组,其中包含两个元素,并按两个DIV元素在DHTML对象树种出现的次序排序。

    这样的ID怎么用啊 ? 是不是觉得有种被IE晃点了的感觉呢?!

    幸好IE迷途知返,在5.0后为HTML元素提供了一个uniqueID的只读属性。这下好,给它弄成readonly的了,看丫还乱不乱?!  还好真的不乱了,不过怎么说这个uniqueID有趣呢?因为uniqueID本身不提供default的值,就是说IE在解析完HTML代码构建了DHMTL树后,并不会给HTML元素分配uniqueID。而需要我们去访问了HTML元素的uniqueID属性后,才会为其生成这个uniqueID的值。其实就是lazy initialize技术,只是放在这里觉得比较好玩。对于uniqueNumber,它是相对于uniqueID的,uniqueID的格式是:ms__id\d+。即一个"ms__id"前缀加一个流水号。所以这个uniqueNumber就是单独表示那个流水号码的。

    uniqueID第二个好玩的地方是,document对象也具有这个属性,不过它和其它HTML的uniqueID属性的意义是完全 不同的。当我们每调用一次document.uniqueID,系统就会返回一个 新的uniqueID值,不过doucment没有uniqueNumber属性哈。

    这时我想起来我在用Popup窗口制作无限级菜单时,构造的__MenuCache__类中,自己实现了一个unique id的产生结构,就有些多此一举了


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

目录
相关文章
|
前端开发
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
Echarts 热力图自定义开发
Echarts 热力图自定义开发
633 0
|
JavaScript 前端开发
JS中 require 与 import 的区别
JS中 require 与 import 的区别
121Echarts - 关系图(Les Miserables)
121Echarts - 关系图(Les Miserables)
145 0
|
缓存
若依 this.$router.push 同地址不同参,页面不刷新问题
若依 this.$router.push 同地址不同参,页面不刷新问题
1294 0
|
前端开发 算法 API
直接在前端做 zip 压缩/解压
前段时间研究前端是如何解析 excel 表格的时候了解到 jszip 这个库,可以直接在前端对 zip 包进行压缩和解压缩,今天稍微水一篇。
|
4月前
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
11月前
|
JavaScript
Vue项目如何生成树形目录结构
这篇文章介绍了如何在Vue项目中生成树形目录结构,通过安装并使用`mddir`命令行工具来创建一个`directoryList.md`文件,从而快速获取项目的树形目录列表。
Vue项目如何生成树形目录结构
|
11月前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
1967 1
Vue3项目使用G6可视化组件实现一个树形机构图