[TOC] --- ### 一、 什么是DOM 操作 DOM( document Object Model) ,是針對HTML 和 XML 的API, 可以理解為DOM 就是一些列功能集合。 ### 二、什么是DOM 樹 1. 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。 HTML DOM 模型被構造為對象的樹：  ### 三、DOM 操作 #### 1. DOM 查詢 ```JavaScript document.getElementById() // 通過id查找元素 document.getElementsByTagName() // 通過標簽查找元素，返回類數組 document.getElementsByClassName() // 通過class查找元素，返回類數組 document.querySelector() // 通過css選擇器查找元素，返回一個選中的元素 document.querySelectorAll(); // 通過css選擇器查找元素，返回類數組 ``` #### 2. DOM 屬性操作 ```JavaScript ele.attributes // 獲取ele元素的所有屬性 返回類數組 ele.getAttribute("屬性名") // 獲取ele元素某個屬性值 ele.setAttribute("屬性名","屬性值") // 為ele元素添加某個屬性以及值 ele.removeAttribute("屬性名") // 刪除ele元素某個屬性 // 比如我們想獲取元素的屬性 還可以 ele.class ele.style ``` #### 3. DOM 文本節點查詢及操作 ```JavaScript ele.childNodes //獲取當前節點的所有子節點（包括元素節點和文本節點）。返回類數組 ele.parentNode //只讀，獲取父元素節點 沒有兼容性問題 ele.nodeType // 返回文本節點值3(文本代碼值) ele.nodeName // 返回文本節點名稱 #text ele.nodeValue //返回節點所包含的文本 ele.appendData(text) //將text 添加到節點的末尾。 ele.deleteData(offset, count) //從offset 指定的位置開始刪除count 個字符。 ele.insertData(offset, text) //在offset 指定的位置插入text。 ele.replaceData(offset, count, text) //用text 替換從offset 指定的位置開始到offset + count 為止處的文本。 ele.splitText(offset) //從offset 指定的位置將當前文本節點分成兩個文本節點。 ele.substringData(offset, count) //提取從offset 指定的位置開始到offset+count 為止 ``` #### 4. DOM 獲取祖先，同胞，子元素 ```JavaScript ele.parentElement // 獲取父元素 ele.children // 獲取子元素返回類數組 ele.firstElementChild // 獲取ele元素的第一個子元素 (不包含空格) ele.firstChild // 獲取ele元素的一個子元素 (包含空格) ele.lastElementChild // 獲取ele元素的最后一個子元素 (不包含空格) ele.nextElementSibling // 獲取ele元素的后一個兄弟元素 (不包含空格) ele.previousElementSibling // 獲取ele元素的上一個兄弟元素 (不包含空格) ``` #### 5. DOM 的增加 刪除 替換 插入 ```JavaScript // 刪除替換 ele.removeChild(el) // 刪除ele元素中的子元素el ele.replaceChild(el1,el2) // 在ele子元素內將el1替換為el2 ele.insertBefore(newEle,oldChildEle) // 將newEle 元素 插入到ele元素內oldChildEle元素前邊 ele.appendChild(el) // 將el元素插入到ele元素內的最后邊 ele.cloneNode(true) // 為true時指示被復制的節點是否包括原節點的所有屬性和子節點 // 創建元素和節點 document.createElement("元素名稱") // 創建一個新元素 document.createTextNode("文本") // 創建一個新文本節點 ``` #### 6. DOM 獲取元素信息 ```JavaScript ele.clientWidth // 獲取元素的可視寬度 padding + content ele.clientHeight // 獲取元素的可視高度 padding + content ele.offsetWidth // 獲取元素的 border+padding+content 寬度 ele.offsetHeight // 獲取元素的 border+padding+content 高度 ele.offsetLeft // 獲取元素 position/relative 左定位+ margin（左） ele.offsetTop // 獲取元素 position/relative 左定位+ margin（上） ele.clientTop // 獲取元素的border 上邊寬度 ele.clientLeft // 獲取元素的border 左邊寬度 ele.scrollHeight //當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際高度 ele.scrollWidth //當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際寬度 ele.scrollTop // （可讀寫）指的是當元素其中的內容超出其寬高的時候，元素被卷起的高度 ele.scrollLeft // （可讀寫）指的是當元素其中的內容超出其寬高的時候，元素被卷起的寬度 ele.getBoundingClientRect() // 會返回一個對象，包含元素的上下左右距離和寬高 ```