//1. li.setAttribute(“score”,100);
//a.会在li标签上生成一个score属性
//b.该属性由于不是html的标准属性，所以不会被封装到dom对象中
//c.可以用getAttribute(“score”)方法来获取该属性值，但是由于该属性值不是对象的基本信息，所以无法通过li.score来访问
//2. li.score = 100;
//a.给li这个dom对象添加一个属性值，该信息会被添加到dom对象中
//b.不会在li标签上生成一个score属性
//c.可以通过li.score来访问该属性值，但是不可以用getAttribute(“score”)方法来获取该属性值，因为这个属性不在标签上
//3.如果要给一个dom对象添加自定义的数据，建议直接使用点的方式，因为使用setAttribute()会在标签上生成额外的属性节点

案例：tab键切换显示

  1. <div class="box" id="box">
  2.   <div class="hd">
  3.     <span class="current">体育</span>
  4.     <span>娱乐</span>
  5.     <span>新闻</span>
  6.     <span>综合</span>
  7.   </div>
  8.   <div class="bd">
  9.     <ul>
  10.       <li class="current">我是体育模块</li>
  11.       <li>我是娱乐模块</li>
  12.       <li>我是新闻模块</li>
  13.       <li>我是综合模块</li>
  14.     </ul>
  15.   </div>
  16. </div>
  17. <style>
  18.     * {
  19.       margin: 0;
  20.       padding: 0;
  21.     }
  22.     ul {
  23.       list-style-type: none;
  24.     }
  25.     .box {
  26.       width: 400px;
  27.       height: 300px;
  28.       border: 1px solid #ccc;
  29.       margin: 100px auto;
  30.       overflow: hidden;
  31.     }
  32.     .hd {
  33.       height: 45px;
  34.     }
  35.     .hd span {
  36.       display: inline-block;
  37.       width: 90px;
  38.       background-color: pink;
  39.       line-height: 45px;
  40.       text-align: center;
  41.       cursor: pointer;
  42.     }
  43.     .hd span.current {
  44.       background-color: purple;
  45.     }
  46.     .bd li {
  47.       height: 255px;
  48.       background-color: purple;
  49.       display: none;
  50.     }
  51.     .bd li.current {
  52.       display: block;
  53.     }
  54. </style>
  55. <script>
  56.   //获取最外面的div
  57.   var box=my$("box");
  58.   //获取的是里面的第一个div
  59.   var hd=box.getElementsByTagName("div")[0];
  60.   //获取的是里面的第二个div
  61.   var bd=box.getElementsByTagName("div")[1];
  62.   //获取所有的li标签
  63.   var list=bd.getElementsByTagName("li");//=================================
  64.   //获取所有的span标签
  65.   var spans=hd.getElementsByTagName("span");
  66.   //循环遍历的方式,添加点击事件
  67.   for(var i=0;i<spans.length;i++){
  68.     //在点击之前就把索引保存在span标签中
  69.     spans[i].setAttribute("index",i);//================================
  70.     spans[i].onclick=function () {
  71.       //第一件事,所有的span的类样式全部移除
  72.       for(var j=0;j<spans.length;j++){
  73.         spans[j].removeAttribute("class");
  74.       }
  75.       //第二件事,当前被点击的span应用类样式
  76.       this.className="current";
  77.       //span被点击的时候获取存储的索引值
  78.       //alert(this.getAttribute("index"));
  79.       var num=this.getAttribute("index");//==============================
  80.       //获取所有的li标签,每个li标签先全部隐藏
  81.       for(var k=0;k<list.length;k++){
  82.         list[k].removeAttribute("class");
  83.       }
  84.       //当前被点击的span对应的li标签显示
  85.       list[num].className="current";
  86.     };
  87.   }
  88. </script>

test.gif