JavaScript中DOM操作之設定標簽屬性

一、標簽屬性值的設定和獲取

標簽對象.steAttribute('屬性名稱',屬性值)；
一次只能定義一個，如果要定義多個，需要多次執行
獲取標簽屬性值
標簽對象.getAttribute('屬性名稱');
獲取的結果都是字符串

//獲取所有div的標簽
var oDiv1 = document.querySelector('div');
//並且將屬性設置為index=0
oDiv1.setAttribute('index',0);
//輸出設定后的結果
console.log( oDiv1 ); 
//獲取屬性名稱為index的屬性值
oDiv2 = oDiv1.getAttribute('index');
//輸出屬性名稱為index的屬性值
console.log( oDiv2); 

二、特殊屬性值的設定

// 標簽對象.id = 屬性值 設定id屬性的屬性值
oDiv.id = 'div1';
//輸出id為div1的屬性值
console.log( oDiv.id )
// 標簽對象.className = 屬性值 設定class屬性的屬性值
oDiv.className = 'div3';
//輸出class為div2的屬性值
console.log( oDiv.className )
//直接使用name操作，部分瀏覽器可以用，存在兼容性問題主要還是使用set,get最安全 
//不推薦
oDiv.name = '張三';
console.log(oDiv.name);

總結：
A:getAttribute\setAttribute是所有屬性標簽都通用的，建議使用
B：id設定：標簽對象.id = 屬性值，也可以用，最好用get和set
C：class設定：標簽對象.className = 屬性值，也可以用，最好用get和set
D：name設定：標簽對象.className = 屬性值，最好不要用，直接用get和set
E、屬性值的設定是替換操作，會覆蓋之前的、寫在前面設的屬性

三、設定標簽屬性值
1、標簽本身具有屬性，可以直接操作，也可以用gat/set來操作

var oDiv = document.querySelector('div');
oDiv.className = 'div1';
oDiv.setAttribute('class','div1')

2、單選框、復選框、checked屬性

//不同瀏覽器存在兼容性問題，有時不能正確獲取值，輸出結果為undefined
var oSpan = document.querySelector('span');
oSpan.setAttribute('name','spanspan)';
oSpan.setAttribute('index','第一個');
console.log(oSpan.name)
console.log(oSpan.index)

3、value屬性值一般用於input標簽

var oBtn1 = document.querySelector('[name="btn1"]');
oBtn1.onclick = function(){
    var oFile = document.querySelector('[type="file"]');
    // 設定在標簽內部的value屬性,不起作用的,獲取的結果是 空字符串
    // 通過點擊選擇上傳內容之后,可以通過value屬性,正確獲取數據參數 
    console.log(oFile.value);
}
var oBtn2 = document.querySelector('[name="btn2"]');
oBtn2.onclick = function(){
    var oText = document.querySelector('textarea');
    // 設定在標簽內部的value屬性,不起作用的,獲取的結果是 空字符串
    // 設定標簽內容,或者寫入內容之后,可以通過value屬性獲取標簽數據 
    console.log(oText.value);
}

注：
A、直接使用是classname和class的值，例如 id,class,checked
B、set方法是class和class的值，例如 index , number , res , idNumber....
C、有時會存在兼容性問題，可以互相試試