今天要接續昨天的主題，繼續談在選取 DOM 之後，有哪些語法可以動態更改 HTML 元素的屬性及 CSS 屬性。

增加 / 更改屬性的值 - setAttribute()

更改某標籤的屬性的值

先取得我們想操作的 DOM，並宣告變數
var el = document.querySelector('.titleClass a');
再用 setAttribute() 更改屬性的值，括號內分別要放 '要更改的屬性' 及 '要更改的值'
el.setAttribute('href','https://www.google.com.tw/');

動態增加 id

假如我有一個 class 叫做 .str，我想動態加上名為 strId 的 id

var el2 = document.querySelector('.str');
el2.setAttribute('id','strId');

讀取屬性的值 - getAttribute()

假如我有一個 a 連結名為 .titleClass，想要讀取該標籤內屬性的值

var el3 = document.querySelector('.titleClass a').getAttribute('href');
//用 console.log 去查，結果會是一串網址

修改 class 值 - className 特性

className 特性可用來變更 class 屬性值，如果屬性不存在，它會建立屬性並將指定的值設定於屬性中。注意，如果原本就有 class 值，再用 className 賦予值的話，會取代原本的 class 值，而不是將新的值加入既有的 class 名稱中。
document.querySelector('.titleClass').className = 新的 class 名稱;

處理多個 class 名稱 - classList 物件

classList 是 DOM 的一個唯讀屬性，但它本身也是一個物件，我們可以使用裡面的方法新增、刪除、修改節點上的 CSS class。
假如有一個叫做 .myDiv 的元素，我想幫它多加一個 class 名（.mystyle），但如果用 className 特性來處理的話，添加新名稱會把原本 .myDiv 的名稱給覆蓋掉，這時就可以用 classList 物件裡的 add() 方法。
document.querySelector('.myDIV').classList.add('mystyle');

classList 物件中除了 add() 方法以外，還有 remove() / toggle() / contains() / length 屬性 / 索引值。
參考資料：JS基礎篇–HTML DOM classList 屬性、HTML DOM classList 属性

修改 CSS 屬性 - style 物件

style 是 DOM 物件的一個特性，它本身也是一個物件。style 物件裡的特性跟 CSS 屬性是對應的，有些名稱相同，有些名稱不同，例如 CSS 的 font-size 屬性對應的 style 特性是 fontSize，而 display 屬性對應到 style 特性也是 display。
document.querySelector('.titleClass').style.屬性名 = 值;

下集預告：如何用 JS 新增內容至 HTML