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：檔案物件

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

Element：元素物件

獲取/創建：通過document來獲取和創建
方法：
1. removeAttribute()：洗掉屬性
2. setAttribute()：設定屬性

Node：節點物件，其他5個的父物件
- 特點：所有dom物件都可以被認為是一個節點
- 方法：
  - CRUD dom樹：
    - appendChild()：向節點的子節點串列的結尾添加新的子節點，
    - removeChild() ：洗掉（并回傳）當前節點的指定子節點，
    - replaceChild()：用新節點替換一個子節點，
- 屬性：
  - parentNode 回傳節點的父節點，

HTML DOM

標簽體的設定和獲取：innerHTML
使用html元素物件的屬性

控制元素樣式

使用元素的style屬性來設定

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

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

感謝

黑馬程式員

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/162008.html

標籤：Java

上一篇：到底什么是 OAuth 2.0？

下一篇：【JAVA SE基礎篇】22.static關鍵字和靜態塊