JS之DOM

DOM(Document Object Model)

---

document：是html的爸爸，可是html是根元素，結合實際經驗理解8（我目前不理解）
把文檔變成對象的模型叫作 DOM

• 本節主要講

1. Node、Document和Element的API
2. 如何將一個很爛很爛的API寫的好用一些（未完成）
3. 本文只是一個筆記，關於接口的屬性和方法的更多信息請參考MDN，文中只提到一小部分。
4. 本節未完。

---

DOM是一棵樹，樹上有Node

Node 分爲 Document（html）、Element（元素）和 Text（文本），以及其餘不重要的。

Node 的接口

1. 屬性：背單詞，而後互相結合

childNodes,firstChild,innerText,lastChild,6nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent

• child / children / parent(s)
• node
• first / last
• next / previous(先前的)
• sibling(兄弟、姐妹) / siblings(兄弟們、姐妹們)
• type
• value / text / content(內容，目錄)
• inner(裏面、內部) / outer(外面、外部)
• element(元素,標籤)

2. 方法（若是一個屬性是函數，那麼這個屬性就也叫作方法；換言之，方法是函數屬性）

• appendChild()：插入一個節點
• cloneNode()：克隆一個節點
  面試題——深拷貝和淺拷貝的區別(看文檔)
• contains()：返回的是一個布爾值，來表示傳入的節點是否爲該節點的後代節點
• hasChildNodes()：返回一個布爾值,代表當前節點是否包含有子節點.
• insertBefore()：在引用節點以前插入節點做爲指定父節點的子節點
• isEqualNode()：測試兩個節點是否相等，
• isSameNode()：測試兩個節點是否相同
• removeChild()：從DOM中刪除一個子節點。返回刪除的節點。
  注意：被移除的這個子節點仍然存在於內存中,只是沒有添加到當前文檔的DOM樹中,所以,你還能夠把這個節點從新添加回文檔中
• replaceChild()：用指定的節點替換當前節點的一個子節點，並返回被替換掉的節點。
• normalize()： 常規化

3. 總結

①搞清楚英文單詞的意思就知道用法。
②若是發現知道英文後依然不明白用法，看 MDN 的例子便可。
DOM APi 無外乎「增刪改查」！（查通常用DOM查）
特別須要記憶的屬性和方法：
①nodeName：除svg小寫外，其他標籤均爲大寫，如'HTML','DIV'等。
②nodeType：=1 是element；=3 是text 等，其他看MDN（面試題）

此處還有面試必考題：DocumentFragment 優化

③ innerText 和 textContent 區別（面試題）
textContent會獲取包括<script> <style>在內的元素內容，而innerText不會。
更多區別看MDN。
④nextSbiling：可能會得到文本
⑤cloneNode()：接受一個布爾值，若是是true就是深拷貝，若是是false就是淺拷貝。
⑤isEqualNode()和isSameNode()的區別:Equal是看起來相等，Same是徹底相等，就是同一個！
⑥normalize()：將不正常的東西變成正常的，具體看文檔。
⑦插入文本的方法：

• div1.appendChild(document.creatTextNode('Hello world'))
• div1.innerText('Hello world')

以有兩種方法，在之後的工做中就能知道用哪一種了，不踩坑是記不住的。

---

Document 的接口

1. 屬性

• body
• characterSet：只讀屬性返回當前文檔的字符編碼
• childElementCount：只讀屬性返回一個無符號長整型數字
• children
• doctype
• documentElement：只讀屬性返回Document的根元素（如html）
• domain：獲取域名
• fullscreen：全屏API
• head
• hidden：//總會有一些沒啥用的API
• images
• links：獲取全部的a標籤
• location
• onxxxxxxxxx：事件監聽
• origin
• plugins：獲取用的裝的插件
• readyState：下載好了嗎？
• referrer：引薦人，好比打開網站A的圖片，服務器就要問瀏覽器referrer是誰，若是是這個網站就是容許訪問，若是不是就拒絕訪問。固然也能夠接受訪問，這個API的功能就是能夠判斷referrer是誰來接受或者拒絕訪問。（這只是一個很垃圾的例子，具體看文檔或者別人講的吧）
• scripts
• scrollingElement：獲取正在滾動的元素
• styleSheets：獲取全部的CSS
• title
• visibilityState：獲取頁面是否被顯示

2. 方法

• close()：關閉當前窗口或某個指定的窗口；與window.open搭配使用
• createDocumentFragment()：建立一個新的空白的文檔片斷
• createElement()
• createTextNode()
• execCommand()：運行代碼；用於寫富文本編輯器
• exitFullscreen()：退出全屏
• getElementById()：                幾乎不用，用querySelector(All)代替
• getElementsByClassName()：幾乎不用，用querySelector(All)代替
• getElementsByName()：        幾乎不用，用querySelector(All)代替
• getElementsByTagName()：  幾乎不用，用querySelector(All)代替
• getSelection()：獲取用戶選中的文本
• hasFocus()：用戶是否focus在當前頁面上
• open()
• querySelector()：返回一個元素
• querySelectorAll()：返回一個或多個元素組成的僞數組（DOM的API得到elements都是僞數組）
• registerElement()：//用的少
• write()
• writeln()

---

Element 的接口

1. 屬性

• attributes：獲取一個元素的全部屬性
• childElementCount
• children
• classList
• className
• clientHeight clientLeft
• clientTop
• clientWidth
• currentStyle
• firstElementChild
• id
• innerHTML：有安全問題，它會把用戶輸入的標籤當作開發者寫的標籤渲染，會引發一些問題。
• lastElementChild
• localName
• name
• namespaceURI
• nextElementSibling
• onfullscreenchange
• outerHTML
• prefix
• previousElementSibling
• runtimeStyle
• scrollHeight
• scrollLeft
• scrollLeftMax
• scrollTop
• scrollTopMax
• scrollWidth
• shadowRoot
• slot

2. 方法

• querySelector()：
• querySelectorAll()：

不僅是document有這兩個方法，element也有。