DOM介紹~超好理解的哦

weixin_46370867發表於2020-12-04

下面是對DOM的介紹,希望可以幫助到有需要的小夥伴,跟小編來看看吧~


什麼是DOM

DOM是文件物件模型,DOM把html文件結構化,定義了一個規範用來通過JS來操作html元素。

DOM的組成

DOM是由節點組成的。

DOM解析過程:

  • html載入完畢後,瀏覽器會把html文件結構化生成一個DOM樹
  • 獲取DOM的元素節點
  • 操作該元素(改變該元素的屬性或給該元素新增事件)

DOM樹(一切都是節點)

在HTML中,一切都是節點

  • 元素節點:HTML標籤
  • 文字節點:標籤中的文字
  • 屬性節點:標籤的屬性
    文字節點是元素節點的子節點;
    屬性節點既不是元素節點的子節點也不是元素節點的父節點;
    整個html文件是一個文件節點;
    所有的節點都是Object型別
    下面是一棵DOM樹
    在這裡插入圖片描述

DOM的用處

  • 獲取元素節點
  • 設定元素的屬性值
  • 設定元素的樣式
  • 動態建立和刪除元素
  • 給元素繫結事件

相關文章