js html中自定义属性值和getAttribute()结合使用获取元素
html中所谓的自定义属性值如下面例子所示:
<div un="line">自定义属性</div>
un="line" 就是一个自定义的属性值。
这种用法在平时使用的很少,但是最近在写一个目录树的效果,所以参考了腾讯企业邮箱的html部分结构,在腾讯企业邮箱的目录树中,就使用到了自定义属性。
针对目录数结构分析:
一般目录树都能随意的添加目录内容,这就导致了整个目录树的结构html结构必须很一致,而且赋予事件函数时,需要批量的按照结构绑定函数
下面就是目录树的一部分:
<ul>
<li un="line">
<div un="kk">第一级</div>
<ul un=="mm">
<li un="line">
<div un="kk">第二级</div>
<ul un="mm">
。。。
</ul>
</li>
</ul>
</li>
</ul>
这个结构中,每一级的目录都是
<div></div>
<ul></ul>内容
而每一级菜单用<li></li>包含在<ul></ul>之中
所有这里就需要用的自定义菜单来让这个结构每一部分(例如所有的<div>标签)能批量获取到
获取的方法可以使用getAttribute()
例如需要获取元素中所有的un="kk";的元素
var divs=document.getElementsByTagName("div");
for(var i=0,max=divs.length;i<max;i++){
if(divs[i].getAttribute("un")=='kk'){
//这里就可以给所有的un="kk"的div元素做操作了
}
}