上一篇大致說明了DOM的節點關係，而本篇補充一些DOM常見的API：

• textContent
• innerHTML
• setAttribute
• querySelectorAll

textContent 寫入文字內容

textContent：取得節點中的文字內容修改，不更改其CSS屬性僅針對內容

既然我們都能在document中選取物件，那也能在其中修改內容或屬性。

const element = document.querySelector("h1");
element.textContent ****=**** "1234"; // 使用.textContent語法重新賦予一個值

雖然在開發人員工具中我們仍會看到上未修改的內容，但頁面呈現卻是以修改的內容，這也代表JavaScript可以動態的去新增、刪除、修改內容。

innerHTML插入HTML標籤

既然能夠新增網頁內容，那網頁元素當然也可以新增

innerHTML：將內容元素刪除後再重新寫入

const A = document.querySelector (".A"); // 選取一個A的div
A.innerHTML = `<p class="header">文字</p>`; // 新增內容 

在新增元素時，要注意外面包住元素的可使用雙引號" "、單引號' '、反引號 ，但不可跟內容所使用的引號重複，否則會無法判斷屬性或字串!

innerHTML加入變數，修改更彈性

在輸入字串時可以穿插變數，未來在作修改時直接修改變數內容會更加方便

const A = document.querySelector (".A"); // 選取一個A的div
let update = https://www.google.com.tw/ // 加入變數讓修改更彈性

A.innerHTML = `<a href="$(update)>可以更新連結</a>`; // 新增內容

setAttribute 增加 HTML 標籤屬性

const link = document.querySelector ("a");

link.setAttribute("href","https://www.google.com.tw/");
link.setAttribute("class","red");

querySelectorAll 可重複選取多個元素

前一篇題到選取元素中分別有querySelector、querySelectorAll兩種，差別在於前者為選取DOM中第一個元素，後者可透過陣列回傳。

const link = document.querySelectorAll ("a"); // 假設有兩個a屬性

link[0].setAttribute("href","https://www.google.com.tw/"); // 選取第一個a連結更改
link[1].setAttribute("href","https://www.google.com.tw/"); // 選取第二個a連結更改

以上為DOM常見的取值方法，下一篇會開始介紹事件處理~若有問題或補充歡迎留言