object.getAttribute() setAttribute()

2012-05-09 20:45

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元素做操作了

}

}