## DOM * DOM是JavaScript操作網頁的接口 * DOM將網頁轉變為JavaScript對象 * DOM有七種節點：document(文檔)，documentType(文檔類型),element(元素)，attribute(屬性)，text(文本)，comment(注釋)，documentFragment(文檔片段) * 除了根節點，其他的節點都有三種關系，父節點，子節點，兄弟節點關系 ## DOM操作節點屬性 * `Node.nodeName` 和 `Node.nodeType` 獲取節點名稱和節點類型，注意這邊節點類型是一個數字 * `Node.nodeValue`返回字符串，但是只有Text，comment和XML文檔中的CDATA節點才有文本值，其他的節點返回null * `Node.textContent`返回當前節點和后代節點的文本內容，可以讀取也可以修改內容。但是要注意修改內容時，HTML標簽會被解析為文本 * `Node.nextSibling`返回緊跟在當前節點的一個同級節點。如果在當前節點后又空格返回的是文本節點，只有緊緊依靠的情況下才會返回同級元素節點 * `Node.previousSibling`返回當前節點前面的距離最近的一個節點，使用方法如`Node.nextSibling` * `Node.parentNode`返回當前節點的父節點，連帶著所有子節點都找到 * `Node.parentElement`與`Node.parentNode`效果相同，盡量使用`Node.parentNode` * `Node.childNodes`返回節點集合，包括文本節點在內的所有節點 * `Node.firstChild/lastChild`返回當前節點的第一個或最后一個子節點 * 總結：很多尋找節點的方法都會文檔中的回車 空格等文本節點干擾，注意使用的時機。 ## DOM操作節點方法 * `Node.appendChild()`接受對象節點，將該節點插入當前節點作為最后一個節點 * `Node.hasChildNodes()`判斷當前節點是否有子節點 * `Node.insertBefore()`指定位置插入子元素，參數有兩個，第一個是要被插入的節點，第二個參數是當前節點的子節點 * `Node.removeChild()`接收一個當前節點的子節點，用于從當前節點中刪除該子節點 * `Node.replaceChild()`用一個新的節點，替換掉當前節點的子節點。參數一是新節點，參數二是要被替換的節點 ## Element對象的相關屬性和方法 * Element屬性方法 * var myList = document.getElementById("myList"); * console.log(myList.id);//返回id屬性值 * console.log(myList.tagName);//返回大寫標簽名 * console.log(myList.innerHTML);//返回所有的子節點，包括文本節點 * console.log(myList.outerHTML);//返回自身和所有的子節點 * console.log(myList.className);//返回當前節點的所有類名 * console.log(myList.classList);//返回當前節點的類名集合 * console.log(myList.classList.contains("ul"));//返回布爾值，判斷當前節點中是否存在指定類名 * console.log(myList.classList.add("fontClass"));//添加指定類名，無返回值 * console.log(myList.classList.add("ulBlueClass"));//注意指定樣式屬性的后來居上 * console.log(myList.classList.remove("ulClass"));//刪除指定類名，無返回值 * 盒子模型的屬性方法 * `Element.clientHeight/clientWidth`返回元素可見部分的高度和寬度：注意包含了`padding`的值 * `Element.clientLeft/Top` 獲取元素左邊框、頂部邊框的寬度 * 查找元素節點的一些方法 * 查找子元素 * `Element.children`獲取當前節點的所有子元素節點集合，這是最常用的方法之一（注意：不包括文本節點） * `Element.childElementCount`返回當前元素的所以子元素的個數 * `Element.firstElementChild`找到當前元素的第一個子元素 * `Element.lastElementChild`找到當前元素的最后一個子元素 * `Element.querySelector()` 傳入css選擇器，找到第一個匹配的子元素 * `Element.querySelectorAll()`傳入css選擇器，找到所有匹配的子元素集合 * 查找同級元素 * `Element.nextElementSibling`找到當前元素緊隨其后（下方）的同級元素 * `Element.previousElementSibling`找到當前元素之前第一個的同級元素 * 查找元素本身（集合） * `document.getElementById("")`通過id屬性值找到元素本身 * `document.getElementsByTagName()`通過標簽名找到元素集合 * `document.getElementsByClassName()`通過類名找到元素集合 * 查找父元素 * `Element.closest()`尋找當前元素的最近的父元素，使用css選擇器來規定父元素的范圍 * 刪除元素 * `Element.remove()` 刪除當前元素本身