DOM 操作

訪問與樹關係（節點）

1. 繪製 DOM 樹: childNodes, attributes
2. 從一個中心元素訪問其所有的直系親屬元素
   • 訪問父節點: parentNode
   • 訪問上一個兄弟節點: previousSibling
   • 訪問下一個兄弟節點: nextSibling
   • 訪問第一個屬性節點: attributes[ 1 ]
   • 訪問第一個子節點：fristChild 或 childNodes[ 0 ]
   • 訪問最後一個子節點: lastChild 或 childNodes[ childNodes.length - 1 ]

方法與功能

核心內容就是利用 增刪改查

查詢

就是獲取元素

1. 標準 DOM API
   • doucment.getElementById
   • document.getElementsByTagName
   • document.getElementsByName
   • document.getElementsByClassName
   • document.querySelectorAll
2. 親屬訪問
3. 屬性獲取
   • getAttribute
   • getAttributeNode

增加

1. 創建
   • document.createElement 創建元素節點
   • document.createTextNode 創建文本節點
   • document.createAttribute 屬性節點
   • innerHTML
   • innerText
   • cloneNode()
2. 加入
   • appendChild 追加到結尾
   • innerHTML
   • insertBefore 用法？將某元素插入到每一個元素的前面

     父元素.insertBefore( 新元素, 舊元素 );
     // 將 新元素 插入到 舊元素 的前面
     

3. 其他
   • style的操作
   • setAttribute(屬性名,屬性值)

刪除

1. 輸出元素
   • removeChild
   • removeAttributeNode

修改

1. 修改節點
   • 刪除節點再加入
2. 修改樣式
   • style.XXX = VVV
   • setAttribute
3. 修改文本
   • innerHTML
   • innerText
   • 節點操作
   • nodeValue
4. 修改屬性
   • .xxx = vvv
   • setAttribute