DOM

javascript 的組成部分

• DOM (document object model) 文檔對象模型
• BOM (browers object model) 瀏覽器對象模型
• ECMAScript js 的核心

[圖片上傳失敗...(image-97c027-1565435728019)]

DOM 節(jié)點

• 節(jié)點分類
  • 元素節(jié)點：每個 HTML元素
    • 屬性節(jié)點：HTML元素的屬性
  • 文本節(jié)點：HTML元素內的文本
    • 注釋節(jié)點：注釋
  • 文檔節(jié)點：整個文檔document
• 節(jié)點類型 --- nodeType
  • 元素節(jié)點：1
    • 屬性節(jié)點：2
  • 文本節(jié)點：3
    • 注釋節(jié)點：8
  • 文檔節(jié)點：9
• 節(jié)點名稱 --- nodeName
  • 元素節(jié)點：與標簽名相同
  • 文本節(jié)點：為#text
  • 注釋節(jié)點：為#comment
  • 文檔節(jié)點：為#document

DOM關系

• childNodes 子節(jié)點
• children 子元素
• firstChild 第0個子節(jié)點
• firstElementChild 第0個子元素
• lastChild 最后一個子節(jié)點
• lastElementChild 最后一個子元素
• nextSibling 下一個兄弟節(jié)點
• nextElementSibling 下一個兄弟元素
• previousSibling 上一個兄弟節(jié)點
• previousElementSibling 上一個兄弟元素
• parentNode 父節(jié)點
• offsetParent 定位父級

DOM 屬性操作

注意 . 和 [] 都是 ECMAScript 中垒探，對象的屬性操作，對象屬性的值會被存在內存中, 想要直接獲取存在 文檔中屬性，或者 想把一個屬性設置在文檔中我們需要使用DOM 的屬性操作

• el.attributes 元素所有屬性的集合
• el.getAttribute("attr") 獲取屬性
• el.setAttribute("attr","val") 設置屬性
• el.removeAttribute("attr") 移出屬性
• el.hasAttribute("attr") 判斷是否有這個屬性
• 只要操作了innerHTML 元素的所有子元素上惊科，存在內存中的事件和相關的屬性都會丟失。如果希望元素的某些屬性在操作了父級的innerHTML 之后，還存在就把這個屬性加在 DOM 中

data 自定義屬性

• 在標簽中定義data自定義屬性：data-key="value";
• 在js操作該元素的 data 自定義屬性：el.dataset
  • 獲扰绯取：el.dataset.key
  • 設置: el.dataset.key = "value"

節(jié)點操作

創(chuàng)建節(jié)點

語法：element document.createElement("tagName"); 創(chuàng)建一個節(jié)點 參數：tagName 標簽名稱 返回值：創(chuàng)建好的節(jié)點

向頁面中添加節(jié)點

• el.appendChild(node) 在元素的末尾添加一個子級
• el.insertBefore(newNode,oldNode) 在 oldNode 前邊添加入 newNode
• 在使用 appendChild 和 insertBefore時，如果添加是一個頁面上已經存在的節(jié)點登舞，會先從原位置刪除贰逾，然后在添加到新的位置去。

刪除節(jié)點

• parent.removeChild(el) 刪除掉某個子元素

克隆節(jié)點

• node.cloneNode(deep)
  • deep: 默認為false
  • deep 為 true, 克隆元素及屬性菠秒，以及元素的內容和后代
  • deep 為 false, 只克隆元素本身疙剑，及它的屬性

元素的尺寸獲取

• offset

  • offsetWidth 可視寬度
  • offsetHeight 可視高度
  • offsetLeft 距離定位父級的left坐標
  • offsetTop 距離定位父級的top坐標

• client

  • clientWidth 可視寬度 - border
  • clientHeight 可視高度 - border
  • clientTop 上邊框寬度
  • clientLeft 左邊框寬度

• scroll

  • scrollWidth 內容寬度
  • scrollHeight 內容高度
  • scrollLeft 左右滾動距離
  • scrollTop 上下滾動距離

• getBoundingClientRect()

  • left 元素左側距離可視區(qū)左側距離
  • top 元素頂部距離可視區(qū)頂部距離
  • right 元素右側距離可視區(qū)左側距離
  • bottom 元素底部距離可視區(qū)頂部距離
  • width 可視寬度
  • height 可視高度

表格相關操作

• tBodies、tHead践叠、tFoot言缤、rows、cells

其他

• createDocumentFragment
• NodeList 和 HTMLCollection