HTM屬性操作 (對象屬性）
指：用JavaScript 來操作一個元素的HTML 屬性
如 下面這個，操作他的id type value ......
<input id="btn" type="button" value="提交"/>
操作HTML 元素屬性的方式有2種
1.使用對象屬性
2.使用對象方法
不管那種方式，都會涉及到 2 種操作
獲取HTML屬性值 和 設置HTML 屬性值
元素操作的是：“元素節點” 屬性操作的是：“屬性節點”
獲取HTML 元素的屬性值，一般通過屬性名，來找到屬性對應的值
語法： obj.attr
obj:元素名 是一個DOM對象 ，也就是getElementById() getElementsByTagName() 等方法獲取到的元素節點 attr :是屬性名 對象 是通過"." 運算符來獲取它的屬性值
使用obj.attr 這種方式，不僅能獲取靜態HTML元素的屬性值，
也可以用來獲取動態創建的DOM元素中的屬性值
例子：獲取單行文本框的值
單行文本框，HTML默認給它添加了一個value屬性，只不過value屬性是空的，
<input id="txt" type="text"/>
//等價於
<input id="txt" type="text" value=""/>
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { var oTxt = document.getElementById("txt"); alert(oTxt.value); } } <input id="txt" type="text">
<input id="btn" type="button" value="獲取" />
例子：獲取單選框的值
window.onload = function () { var oBtn = document.getElementById("btn"); var oFruit = document.getElementsByName("fruit"); oBtn.onclick = function () { //for循環遍歷 所有的單選框
for (var i = 0; i < oFruit.length; i++) { //判斷當前遍歷的單選框是否被選中，也就是checked是否為true
if (oFruit[i].checked) { alert(oFruit[i].value); } } } } <div>
<label><input type="radio" name="fruit" value="蘋果" />蘋果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="梨子" />梨子</label>
<label><input type="radio" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="獲取" />
例子：獲取復選框的值
window.onload = function () { var oBtn = document.getElementById("btn"); var oFruit = document.getElementsByName("fruit"); var str = ""; oBtn.onclick = function () { //for循環遍歷 所有的單選框
for (var i = 0; i < oFruit.length; i++) { if (oFruit[i].checked) { str += oFruit[i].value; } } alert(str); } } <div>
<label><input type="checkbox" name="fruit" value="蘋果" />蘋果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="梨子" />梨子</label>
<label><input type="checkbox" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="獲取" />
例子：獲取下拉列表的值
下拉菜單比較特殊，當用戶選中哪一個option時，該option的value值就會自動變成當前select元素的value值
value是傳給后台處理的，而標簽中 的文本是給用戶看的，這兩個值 大多數時候是一樣的，但有時會不一樣，這取決於開發需求
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { var oSelect = document.getElementById("select"); alert(oSelect.value); } } <select id="select">
<option value="北京">北京</option>
<option value="浙江">浙江</option>
<option value="江蘇">江蘇</option>
<option value="南京">南京</option>
</select>
<input id="btn" type="button" value="獲取" />
設置HTML屬性值 (也是通過屬性名來設置的)
語法： obj.attr = "值"； obj是元素名 是個DOM對象， attr 是屬性名
window.onload = function () { var oBtn = document.getElementById("btn"); var oPic = document.getElementById("pic"); var flag = true; oBtn.onclick = function () { if (flag) { oPic.src = "./images/lei_1.jpg"; flag = false; } else { oPic.src = "./images/bg-1.png"; flag = true; } } } <input id="btn" type="button" value="切換" />
<img id="pic" src="./images/bg-1.png" />
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { oBtn.value = "button"; } } <input id="btn" type="button" value="修改" />
HTML屬性操作（對象方法） 四種方法
getAttribute() 只有一個參數， 注這個參數是用英文引號括起來的
setAttribute()
removeAttribute()
hasAttribute()
getAttribute() 獲取元素的某個屬性的值
語法：obj.getAttribute("attr") obj 是元素名， attr是屬性名 等價於 obj.attr;
setAttribute() 方法 ，設置元素的某個屬性的值
語法：obj.setAttribute("attr","值")； obj是元素名 arrt是屬性名 setAttribute() 有2個參數，第一個參數：屬性名， 第二個參數是：你要設置的屬性值 obj.setAttribute("attr","值")； 等價於 obj.attr ="值"； getAttribute() 獲取元素的某個屬性的值
obj.getAttribute("attr") 等價於 obj.attr; obj.setAttribute("attr","值")； 等價於 obj.attr ="值"； 以上的是等價的，不僅可以用來獲取靜態HTML元素的屬性值，也可獲取動態DOM元素中的屬性值 唯一的區別在於，獲取或設置自定義屬性值 的時候是有區別的 <input id="btn" type="button" value="插入" data="javascript" />
比如上面這個標簽里有一個自定義的屬性data,(也就是用戶自己定義，而不是元素自帶的) 使用obj.arr(對象屬性方式是無法實現的) 會提示undefined 因為這個無法獲取自定義的屬性值 只能使用obj.getAttribute("attr")(對象方法來實現)
實例1： 獲取固有屬性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert(oBtn.getAttribute("id")); } } <input id="btn" class="myBtn" type="button" value="獲取" />
實例2：獲取自定義屬性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { //data是自定義屬性而不是元素自帶的 使用obj.attr(對象屬性方式)是無法實現的
//只能使用對象方法方式來實現 getAttribute("attr")
//alert(oBtn.data); //undefined
alert(oBtn.getAttribute("data")); } } <input id="btn" type="button" value="插入" data="javascript" />
實例3：設置固有屬性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { oBtn.setAttribute("value", "button"); } } <input id="btn" type="button" value="修改">
removeAttribute()方法 刪除元素的某個屬性
先用hasAttribute() 判斷這個屬性是否存在，如果存在，在去刪除
語法：obj.removeAttribute("attr");//這是刪除元素的某個屬性的唯一方法，，用對象屬性是無法實現的
hasAttribute() 方法 判斷元素是否含有某個屬性
語法： obj.hasAttribute("attr"); 返回的是一個布爾值， 如果包含則返回true , 如果不包含則返回false 嚴謹做法：先用 hasAttribute() 判斷這個屬性是否存在， 如果存在在使用removeAttribute("");進行刪除
在實際中 removeAttribute(" ");更多的是 結合class 屬性來 “整體” 控制元素的樣式屬性
<style> .main { color: red; font-weight: bold; } </style>
window.onload = function () { var oP = document.getElementsByTagName("p"); var oBtn_add = document.getElementById("btn_add"); var oBtn_remove = document.getElementById("btn_remove"); //添加樣式
oBtn_add.onclick = function () { oP[0].className = "main"; } //刪除樣式
oBtn_remove.onclick = function () { //下面是刪除樣式的兩種方法,是等價的
//oP[0].removeAttribute("class");
oP[0].className = ""; } } <p>這是一個網站</p>
<input id="btn_add" type="button" value="添加樣式">
<input id="btn_remove" type="button" value="刪除樣式" />
<style> .main { color: red; font-weight: bold; } </style>
<script> window.onload = function () { var oP = document.getElementsByTagName("p"); if (oP[0].hasAttribute("class")) { oP[0].onclick = function () { oP[0].removeAttribute("class"); } } } <p class="main">這是一個網站</p>
總結：對象屬性方式 和 對象方法方式，不僅可以操作靜態HTML的屬性
還可以操作動態的DOM的屬性
只有“對象方法方式” 才可以操作自定義屬性