DOM 節點操作一、擷取節點二、增加節點三、删除節點四、element.innerHTML ---節點的HTML内容---建議僅用于『建立、插入新節點』，且内容可控

方法名

隻能document調用

傳回單一的值

傳回動态集合

getElementById

√

getElementsByTagName

getElementsByClassName

querySelectorAll

querySelector

//建立節點 document.createElement(tagName);  舉個栗子: document.createElement(li); ---建立一個 li 元素節點 //插入節點 elementParent.appendChild(elementChild) --- 在『elementParent元素』中的『最後位置』，插入『elementChild元素』。 舉個栗子： ul.appendChild(li); ---在 ul 中的最後位置插入li elementParent.insertBefore(elementChild)------ 在『elementParent元素』中的『開頭位置』，插入『elementChild元素』。

舉個栗子：ul.insertBefore(li,ul.firstChild);---在 ul 中的第一個元素之前插入 li

elementParent.removeChild(elementChild) --- 在 『elementParent元素』中将 『elementChild元素』删除。

舉個栗子: var users2=users.getElementsByClassName(‘user’)[1]; //查找要删除的目标                  user2.parentNode.removeChild(user2); //删除                 其中 parentNode 指的是 父節點

element.innerHTML=’’; //清空element下的所有html元素

li.innerHTML = ’<img src=”4.jpg”><a href=”/user/4”>lifeng</a>’;  //建立節點，插入節點，設定了屬性

用innerHTML時的bug:

// innerHTML 修改節點之前如果節點已經綁定事件，此時『事件』會駐留到記憶體當中，導緻記憶體洩漏。

//innerHTML 内容在插入到節點時，浏覽器會不做檢查的直接展現出來，那麼使用者就可以自己加入腳本執行。

開始做，堅持做，重複做