一、setattribute方法的作用與基礎(chǔ)用法

setAttribute()方法是JavaScript中常用的DOM方法之一，用于設(shè)置DOM元素的屬性。它的基礎(chǔ)用法非常簡(jiǎn)單，只需要傳入兩個(gè)參數(shù)name和value即可，其中name表示屬性名稱，value表示屬性值。例如：

var element = document.getElementById('example');
element.setAttribute('class', 'highlight');

上述代碼的作用是將id為example的元素的class屬性設(shè)置為highlight。

除了用于設(shè)置單個(gè)屬性，setAttribute()方法也可以用于設(shè)置多個(gè)屬性，只需使用該方法多次即可。例如：

var element = document.getElementById('example');
element.setAttribute('class', 'highlight');
element.setAttribute('title', 'This is an example element.');

上述代碼的作用是將id為example的元素的class屬性設(shè)置為highlight，并將title屬性設(shè)置為T(mén)his is an example element.。

二、setattribute方法的進(jìn)階用法

除了基礎(chǔ)用法外，setAttribute()方法還有許多進(jìn)階用法。

1. 通過(guò)對(duì)象設(shè)置屬性

在基礎(chǔ)用法中，需要手動(dòng)設(shè)置屬性名稱和屬性值。而在實(shí)際開(kāi)發(fā)中，經(jīng)常使用對(duì)象來(lái)管理屬性。這時(shí)，可以使用以下方式來(lái)設(shè)置屬性：

var element = document.getElementById('example');
element.setAttribute('style', 'color: red; font-size: 16px;');

上述代碼的作用是通過(guò)style屬性將元素的文字顏色設(shè)置為紅色，字號(hào)設(shè)置為16px。

在這里，屬性值采取了CSS樣式的書(shū)寫(xiě)方式，此時(shí)可以使用JavaScript對(duì)象來(lái)管理屬性，例如：

var styles = {
  color: 'red',
  'font-size': '16px'
};
var element = document.getElementById('example');
for(var key in styles) {
  element.setAttribute('style', key + ':' + styles[key] + ';');
}

上述代碼的作用與前面的代碼相同，使用了對(duì)象方式來(lái)設(shè)置屬性。

2. 刪除屬性

除了設(shè)置屬性之外，setAttribute()方法還可以用于刪除屬性。當(dāng)setAttribute()方法的value參數(shù)為null時(shí)，表示刪除該屬性。例如：

var element = document.getElementById('example');
element.setAttribute('class', null); // 刪除class屬性
element.setAttribute('title', null); // 刪除title屬性

上述代碼的作用是將id為example的元素的class屬性和title屬性刪除。

3. data-屬性的設(shè)置

在HTML5中，使用data-前綴可以定義自定義的屬性。使用setAttribute()方法也可以設(shè)置自定義的data-屬性。例如：

var element = document.getElementById('example');
element.setAttribute('data-name', 'Alice');
element.setAttribute('data-age', '20');

上述代碼的作用是為id為example的元素設(shè)置data-name和data-age屬性，并分別設(shè)置為Alice和20。

4. 只讀屬性的設(shè)置

一些屬性是只讀的，例如input元素的value屬性。在使用setAttribute()方法嘗試修改這些只讀屬性時(shí)，是無(wú)效的。例如：

var input = document.getElementById('input');
input.setAttribute('value', 'hello'); // 無(wú)效

上述代碼的作用是嘗試將輸入框的內(nèi)容設(shè)置為hello，但是失敗了。在這種情況下，必須使用元素的特定屬性來(lái)設(shè)置只讀屬性，例如：

var input = document.getElementById('input');
input.value = 'hello'; // 成功

上述代碼的作用是將輸入框的內(nèi)容設(shè)置為hello，成功了。

三、總結(jié)

setAttribute()方法在JavaScript中是常用的DOM操作方法之一，可以用于設(shè)置單個(gè)或多個(gè)屬性，還支持通過(guò)對(duì)象設(shè)置屬性和刪除屬性等進(jìn)階用法。需要注意的是，部分只讀屬性不能通過(guò)setAttribute()方法進(jìn)行修改。