一，HTML属性操作（对象属性）

HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。

在JavaScript中，有两种操作属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。

1. 获取HTML属性值

获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。

语法：
obj.attr
说明：
obj是元素名，它是一个DOM对象。

所谓DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。

attr是属性名，对于一个对象来说，通过点运算符来获取它的属性值。
例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script>
  7.       window.onload = function()
  8.       {
  9.         var oBtn = document.getElementById("btn");  //要想获取属性的值，首先需要找到这个元素节点
  10.         oBtn.onclick = function()
  11.         {
  12.           alert(oBtn.id);  //通过元素节点获取该属性的值
  13.           //获取文本框的值
  14.             var oTxt = document.getElementById("txt");
  15.           alert(oTxt.value);  //通过value属性获取文本框的值
  16.           //使用for循环遍历所有的单选框
  17.           var oFruit = document.getElementsByName("fruit");
  18.           for(var i=0; i<oFruit.length; i++)
  19.           {
  20.             if(oFruit[i].checked)   //判断当前遍历的单选框是否被选中（即checked是否为true）
  21.             {
  22.               alert(oFruit[i].value);
  23.             }
  24.           }
  26.           //使用for循环获取复选框内容
  27.           var oFruit = document.getElementsByName("fruit");
  28.           var str = "";
  29.           for(var i=0; i<oFruit.length; i++)
  30.           {
  31.             if(oFruit[i].checked)
  32.             {
  33.               str += oFruit[i].value;
  34.             }
  35.           }
  36.           alert(str);
  37.         };
  39.         //获取下拉菜单的值
  40.         var oSelect = document.getElementById("select");
  41.         alert(oSelect.value);
  42.       }
  43.     </script>
  44.   </head>
  45.   <body>
  46.     <input id="btn" class="myBtn" type="button" value="获取"/>
  47.     <input id="txt" type="text">
  48.     <div>
  49.       <label><input type="radio" name="fruit" value="苹果"/></label>
  50.       <label><input type="radio" name="fruit" value="香蕉"/></label>
  51.       <label><input type="radio" name="fruit" value="西瓜"/></label>
  52.     </div>
  53.     <div>
  54.       <label><input type="checkbox" name="fruit" value="苹果"/></label>
  55.       <label><input type="checkbox" name="fruit" value="香蕉"/></label>
  56.       <label><input type="checkbox" name="fruit" value="西瓜"/></label>
  57.     </div>
  58.     <div>
  59.       <select id="select">
  60.         <option value="北京">北京</option>
  61.         <option value="上海">上海</option>
  62.         <option value="广州">广州</option>
  63.         <option value="成都">成都</option>
  64.         <option value="西安">西安</option>
  65.       </select>
  66.     </div>
  67.   </body>
  68. </html>

注意：

如果想要获取一个元素的class值，不能写成obj.class，而应该是obj.className

在实际的开发中，获取文本框、单选按钮、复选框、下拉列表中的值，都是通过value属性获取的！

2. 设置HTML属性值

语法：
obj.attr = "值";
说明：
obj是元素名，它是一个DOM对象，attr是属性名
例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script>
  7.       window.onload = function()
  8.       {
  9.         var oBtn = document.getElementById("btn");
  10.         var oPic document.getElementById("pic");
  11.         var flag = true;
  12.         oBtn.onclick = function()
  13.         {
  14.           if(flag){
  15.             oPic.src = "img/2.png";
  16.             flag = false;
  17.           }else{
  18.             oPic.src = "img/1.png";
  19.             flag = true;
  20.           }
  21.         };
  22.       }
  23.     </script>
  24.   </head>
  25.   <body>
  26.     <input id="btn" type="button" value="修改"/><br/>
  27.       <img id="pic" src="img/1.png">
  28.   </body>
  29. </html>

二，HTML属性操作（对象方法）

1. getAttribute( )

在JavaScript中，可以使用getAttribute( )方法来获取元素的某个属性的值

语法：
obj.getAttribute("attr");
说明：
obj是元素名，attr是属性名。
它与obj.attr是等价，不同的是该方法是可以获取自定义属性值，而obj.attr不行。
例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script>
  7.       window.onload = function()
  8.       {
  9.         var oBtn = document.getElementById("btn");
  10.         oBtn.onclick = function()
  11.         {
  12.           alert(oBtn.data);   //此时会报错，因为obj.attr方式是不能获取自定义属性的值；
  13.           alert(oBtn.getAttribute("data"));   //通过这种方式可以获取
  14.         };
  15.       }
  16.     </script>
  17.   </head>
  18.   <body>
  19.     <input id="btn" type="button" value="获取" data="JavaScript">  //data属性是自定义属性
  20.   </body>
  21. </html>

备注：
所谓自定义属性，是指这个属性是用户自己定义的而不是元素自带的。

2. setAttribute( )

设置元素的某个属性的值

语法：
obj.setAttribute("atrr","值");
说明：
obj是元素名，attr是属性名；
等价于obj.attr = “值”;
注意：
与getAttribute()方法相似，通过自定义属性的值，只能使用setAttribute( )方法来实现。

3. removeAttribute( )

该方法用来删除元素的某一个属性

语法：
obj.removeAttribute("attr");
例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script>
  7.       window.onload = function()
  8.       {
  9.         var oP = document.getElementsByTagName("p");   //通过标签获取元素
  10.         oP[0].onclick = function()
  11.         {
  12.           oP[0].removeAttribute("class");   //删除class属性
  13.         }
  14.       }
  15.     </script>
  16.   </head>
  17.   <body>
  18.     <p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
  19.   </body>
  20. </html>

该方法更多情况下是结合class属性来“整体”控制元素的样式属性的！
例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <meta charset="utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.       .main{color:red;font-weight:bold;}
  8.     </style>
  9.     <script>
  10.       window.onload = function ()
  11.       {
  12.         var oP = document.getElementsByTagName("p");
  13.         var oBtnAdd = document.getElementById("btn_add");
  14.         var oBtnRemove = document.getElementById("btn_remove");
  15.         //添加class属性
  16.         oBtnAdd.onclick = function()
  17.         {
  18.           oP[0].className = "main";
  19.         };
  20.         //删除class
  21.         oBtnRemove.onclick = function()
  22.         {
  23.           oP[0].removeAttribute("class");
  24.         };
  25.       }
  26.     </script>
  27.   </head>
  28.   <body>
  29.     <p>你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
  30.     <input id="btn_add" type="button" value="添加样式">
  31.     <input id="btn_remove" type="button" value="删除样式">
  32.   </body>
  33. </html>

备注：
要想为一个元素删除一个class，可以使用：

oP[0].calssName = “”; oP[0].removeAttribute(“class”);