# 【Day24】DOM取值方法 ###### tags: `JavaScript` `14th鐵人賽` 上一篇大致說明了DOM的節點關係，而本篇補充一些DOM常見的API： - textContent - innerHTML - setAttribute - querySelectorAll --- ## ****textContent 寫入文字內容**** `textContent`：取得節點中的文字內容修改，不更改其CSS屬性僅針對內容 既然我們都能在document中選取物件，那也能在其中修改內容或屬性。 ```jsx const element = document.querySelector("h1"); element.textContent ****=**** "1234"; // 使用.textContent語法重新賦予一個值 ``` 雖然在開發人員工具中我們仍會看到上未修改的內容，但頁面呈現卻是以修改的內容，這也代表JavaScript可以動態的去新增、刪除、修改內容。 ## innerHTML插入HTML標籤 既然能夠新增網頁內容，那網頁元素當然也可以新增 `innerHTML`：將內容元素刪除後再重新寫入 ```jsx const A = document.querySelector (".A"); // 選取一個A的div A.innerHTML = `<p class="header">文字</p>`; // 新增內容 ``` 在新增元素時，要注意外面包住元素的可使用雙引號`" "`、單引號`' '`、反引號`` ``，但不可跟內容所使用的引號重複，否則會無法判斷屬性或字串! ## innerHTML加入變數，修改更彈性 在輸入字串時可以穿插變數，未來在作修改時直接修改變數內容會更加方便 ```jsx const A = document.querySelector (".A"); // 選取一個A的div let update = https://www.google.com.tw/ // 加入變數讓修改更彈性 A.innerHTML = `<a href="$(update)>可以更新連結</a>`; // 新增內容 ``` ## setAttribute 增加 HTML 標籤屬性 ```jsx const link = document.querySelector ("a"); link.setAttribute("href","https://www.google.com.tw/"); link.setAttribute("class","red"); ``` ## ****querySelectorAll 可重複選取多個元素**** 前一篇題到選取元素中分別有querySelector、querySelectorAll兩種，差別在於前者為選取DOM中第一個元素，後者可透過**陣列**回傳。 ```jsx 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常見的取值方法，下一篇會開始介紹事件處理~若有問題或補充歡迎留言