JS之DOM

omnoob發表於2019-07-05
JS

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（文字），以及其他不重要的。

JS之DOM

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也有。

相關文章