javascript学习笔记--js对html对象的原生操作

   本文转载自 http://www.zhangyunling.com/?p=28 有删改

        操作HTML元素属性的方法

通常情况下，我们使用的方法有两种：(假设我们获取到的HTML对象是obj)

• 1，对象方法，例如obj.id，取得目标obj的属性id的值。
• 2，DOM方法，使用obj.getAttribute("id"),同样能获取到id的值。
  
  
  
  

  两种方法的区别

  
  
• 对于常用的属性，比如：id,class等，使用第一种方法obj.id取值，
  

• 读取已有的属性

  • <div id="select" class = "class" data-data = "data" aaa = "aaa"></div>
  • var obj = document.getElementById("select");
  • //下面分别使用两种方法，获取对应的值
  • console.log(obj.className); //class
  • console.log(obj["data-data"]);//undefined
  • console.log(obj.dataset.data);//data-data属性，是HTML5中新支持的属性，使用这样的方法进行获取，obj.dataset是一个对象，可以存储多个属性的值，支持这个属性的浏览器返回值是“data”,不支持dataset属性的，浏览器会抛出异常。IE9没有这个属性，IE10+的未测试。
  • console.log(obj.aaa); //undefined
  • console.log("aaa" in obj); //结果是undefined,对象检测属性是否存在的，由这里可以看出，自定义的属性，是不会存在于obj对象的直接子属性中的。注：IE8-的模式下，这里的结果是true，这应该是因为，IE8-的浏览器中，HTML的DOM标签对象，并不是继承自Object对象的原因吧。所以在HTML标签上面，添加的属性，都会被添加到对应标签的对象上面去，这个是使用该种方法的一个差异之处。

  接下来使用另外一种方法：

  • console.log(obj.getAttribute("class")); //class
  • console.log(obj.getAttribute("data-data")); //data
  • console.log(obj.getAttribute("aaa")); //aaa

  对标签使用两种方法设置属性

  • <div id="select"></div>
  • var obj = document.getElementById("select");

  使用第一种方法设置：

  • obj.className = "class"; //没问题，在所有浏览器下都设置成功。
  • obj['data-data']= "data1"; //IE8-的浏览器下，设置成功，其他都不行。
  • //obj.dataset.data= "data2"; //支持dataset的，都可以。
  • obj.aaa = "aaa"; //IE8-的浏览器下，设置成功，其他都不行。