Js--DOM詳解

Js--DOM詳解

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！

概念

• Document Object Model 文檔對象模型

  • 將標記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作

• W3C DOM 標准被分為 3 個不同的部分：

  • 核心 DOM - 針對任何結構化文檔的標准模型

    • Document：文檔對象

    • Element：元素對象

    • Attribute：屬性對象

    • Text：文本對象

    • Comment:注釋對象

    • Node：節點對象，其他5個的父對象

  • XML DOM - 針對 XML 文檔的標准模型
  • HTML DOM - 針對 HTML 文檔的標准模型

核心DOM模型

Document：文檔對象

1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
   1. window.document
   2. document
2. 方法：
   1. 獲取Element對象：
      1. getElementById() ： 根據id屬性值獲取元素對象。id屬性值一般唯一
      2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
      3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
      4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
   2. 創建其他DOM對象：
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()
3. 屬性

Element：元素對象

1. 獲取/創建：通過document來獲取和創建
2. 方法：
   1. removeAttribute()：刪除屬性
   2. setAttribute()：設置屬性

• Node：節點對象，其他5個的父對象
  • 特點：所有dom對象都可以被認為是一個節點
  • 方法：
    • CRUD dom樹：
      • appendChild()：向節點的子節點列表的結尾添加新的子節點。
      • removeChild() ：刪除（並返回）當前節點的指定子節點。
      • replaceChild()：用新節點替換一個子節點。
  • 屬性：
    • parentNode 返回節點的父節點。

HTML DOM

1. 標簽體的設置和獲取：innerHTML

2. 使用html元素對象的屬性

3. 控制元素樣式

   1. 使用元素的style屬性來設置

      	 //修改樣式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";
      

   2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其class屬性值。

感謝

黑馬程序員

以及勤勞的自己
關注公眾號： 歸子莫，獲取更多的資料，還有更長的學習計划