學習目標：了解如何透過 JavaScript 改變瀏覽器的元素
本文主要源自以下資料的學習整理：
之前都是使用 node js 來練習 JavaScript，現在我們要實際用瀏覽器來操作 JavaScript，對於前端來說比較會去關注的面相為以下三種：
- 介面：如何改變介面
- 事件：如何監聽事件並作出反應
- 資料交換：如何跟伺服器交換資料
此篇將會談到「改變介面」的部分
終於～～～要換個執行環境來玩玩 JavaScript 了（跟搬家、換工作環境一樣興奮？）
執行環境的改變，在語法支援度上也會有所差異，例如：
require() 把模組引入進來，只能在 node.js 上執行。alert() 叫出提示窗，只能在瀏覽器上執行。
DOM
全名 Document Object Model 中文為文件物件模型。
白話文來說就是把 Document （也就是 HTML）轉換成 Object ，是瀏覽器提供使用 JavaScript 時可以去操作 Document 上元素的橋樑。
取 DOM 元素
.getElementsByTagName()
- 以 HTML 標籤返回指定的對象的集合
- 舉例：
document.getElementsByTagName('div')
- 變化型
- 取到值
document.getElementsByTagName('div')[0]
.getElementsByClassName()
- 以 class 屬性返回指定的對象的集合
- 舉例：
document.getElementsByClassName('first)
- 變化型
- 取到值
document.getElementsByClassName('greet')[0]
2. 選擇包含多個 class document.getElementsByClassName('greet english')
.getElementById()
- 以 id 屬性返回指定的元素
- 舉例：
document.getElementById('france')
.querySelector()
- 回傳第一個特定選擇器的元素
- 方便使用！就像是寫 CSS 一樣，也可以使用關係選擇器來抓取元素
- 舉例：
document.querySelector('.greet')#只會回傳第一個'.greet'class
.querySelectorAll()
- 返回匹配的元素集合
- 舉例：
document.querySelectorAll('.greet')
- 變化型
- 取到值
document.querySelectorAll('greet')[0]
改變元素的 CSS
.style
- 直接寫上行內樣式（不推薦的方法）
- 方法一、
HTMLElement.style['padding-top'] = '20px' - 方法二 、
HTMLElement.style.paddingTop = '20px' - 變化型
- 寫入多個樣式
HTMLElement.style.cssText = "color: blue; border: 1px solid black"
改變元素的 Class（比較好的方法）
.classList.add()
- 增加 class
- 舉例：
HTMLElement.classList.add('active') - 變化型
- 增加多個
HTMLElement.classList.add('active','active2','active3')
.classList.remove()
- 刪除 class
- 舉例：
HTMLElement.classList.remove('active')
.classList.toggle()
- 切換 class
- 舉例：
HTMLElement.classList.toggle('active')
.classList.contains()
- 判斷是否包含該 class
- 舉例：
HTMLElement.classList.contains("active")
改變元素的內容
.innerText
- 最常使用，獲取或設置元素內的文字
- 舉例：
HTMLElement.innerText = 'buzz'
.innerHTML
- 獲取或設置元素內包含的 HTML 標籤
- 舉例：
HTMLElement.innerHTML = '<h2>buzz</h2>'
.outerHTML
- 獲取或重新設置元素本身
- 舉例：
HTMLElement.outerHTML = '<h2>buzz</h2>'
刪除與插入元素
.removechild()
- 刪除子元素
- 舉例：
情況一、在知道父元素的情況下，刪除元素
HTMLElement.removechild(document.querySelector('a'))情況二、在不知道父元素的情況下，刪除元素
let node = document.querySelector('#nested') //要刪除的元素if(node.parentNode) { //如果有找到父元素就刪除 node.parentNode.removeChild(node)}
情況三、刪除父元素底下的所有子節點
while(block.firstChild){ //找到第一個元素，當找不到代表沒有子元素了 block.removeChild(block.firstChild); //刪除第一個元素}
.appendChild()
- 加一個元素在最後方
- 舉例：
let newElement = document.createElement('h1')let newTextElement = document.createTextNode('15ya baby')block.appendChild(newElement); //增加節點block.appendChild(newTextElement); //增加文字節點
- 補充說明：如果是增加一個已存在的節點，appenChild 做的是位移，而不是新增。因此，如果要重複增加，要使用
.cloneNode()＃參考資料：[JS小細節] Node Element 在 appendChild 後消失（disappear）!?
其他選取元素的方式
.children：取得全部的子元素.firstChild：取得第一個子元素.lastChild：取得最後一個子元素.parentNode：取得父元素
以上有錯誤的地方歡迎指正，感謝。
