1).新建節點 ``` document.createElement("元素名") // 新建一個元素節點 document.createAttribute("屬性名") // 新建一個屬性節點 document.createTextNode("文本內容") // 創建一個文本節點 document.createDocumentFragment() // 新建一個DOM片段 ``` 2).添加、移除、替換、插入： ``` appendChild() // 向節點的子節點末尾添加新的子節點 removerChild() // 移除 parentNode.replaceChild(newChild, oldChild );用新節點替換父節點中已有的子節點 insertBeform() // 在已有的子節點前插入一個新的子節點 ``` 3).查找 ``` document.getElementById() // 通過元素id查找,唯一性 document.getElementByClassName() // 通過class名稱查找 document.getElementsByTagName() // 通過標簽名稱查找 document.getElementsByName() // 通過元素的Name屬性的值查找? ``` ------------------------------------------------------------------ DOM回流、重繪 DOM回流(reflow)：頁面中的元素增加、刪除、大小、位置的改變，會引起瀏覽器重新計算 其他元素的位置，這種現象稱為DOM回流。DOM回流非常消耗性能，盡量避免DOM回流 DOM重繪：元素的某些css樣式如背景色、字體顏色等發生改變時，瀏覽器需要重新描繪渲 染這個元素，這種現象稱為DOM重繪。 DOM 操作的讀寫分離 在JS中把設置樣式和獲取樣式的兩種操作分來來寫， 設置樣式的操作放在一起，讀取樣式的操作放在一起，這樣可以有效的減少DOM的回流和重繪； ``` Box.style.background = ‘red’; For(){} Box.style.color = ‘green’ ``` DOM事件： 事件的傳播機制：先冒泡，然后是目標階段 然后再去捕獲，我們可以利用事件的冒泡來進行事件委托，、也就是可以在父元素上綁定事件，通過事件對象 e 來判斷點擊的具體元素；可以提供性能； 我們可以利用的 e.stopPropagation()來阻止冒泡；利用 e.preventDefault()來阻止默認事件； 事件中有0級事件綁定和2級事件綁定