JavaScript檔案物件模型總結（DOM）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：黃富滔
撰寫時間：2020年4月27日
知識點羅列
1、JavaScript的組成部分
完整的JS實作是由以下3個不同部分組成：ECMAScript、檔案物件模型（DOM）、瀏覽器物件模型（BOM）。
2、DOM簡介
檔案物件DOM屬于宿主物件中的一種，宿主物件是由JS的運行環境提供的物件，目前來講主要指由瀏覽器提供的物件
- DOM，全稱Document Object Model檔案物件模型
- JS中通過DOM來對HTML檔案進行操作。只要理解了DOM就可以隨心所欲的
操作WEB頁面。
檔案
- 檔案表示的就是整個的HTML網頁檔案
物件
- 物件表示將網頁中的每一個部分都轉換為了一個物件
模型
- 使用模型來表示物件之間的關系，這樣方便我們獲取物件
小結：檔案物件模型，把HTML網頁中的每一個部分轉換成一個物件，然后在JS進行獲取。
簡單來說：JS和HTML是兩門不同領域的語言，如果想要進行互動，比如對HTML進行增刪查改就要用到DOM去接收HTML檔案傳遞過來的內容。換言之，HTML DOM 是關于如何獲取、修改、添加或洗掉 HTML 元素的標準。
。
3、節點Node——構成HTML檔案最基本的單元。
-網頁中的每一個部分都可以稱為是一個節點， 雖然都是節點，但是實際上他們的具體型別是不同的。
節點的分類：
①檔案節點：指的是整個HTML檔案
- 檔案節點document，代表的是整個HTML檔案，網頁中的所有節點都是它的子節點。
- document物件作為window物件的屬性存在的，我們不用獲取可以直接使用
- 通過該物件我們可以在整個檔案訪問內查找節點物件，并可以通過該物件創建各種節點物件
②元素節點：指的是HTML檔案中的標簽
- HTML中的各種標簽都是元素節點，這也是我們最常用的一個節點。
- 瀏覽器會將頁面中所有的標簽都轉換為一個元素節點，我們可以通過document的方法來獲取 元素節點。
- 比如：
– document.getElementById()
– 根據id屬性值獲取一個元素節點物件。
③文本節點：指的是標簽內的文本
- 文本節點表示的是HTML標簽以外的文本內容，任意非HTML的文本都是文本節點。
- 它包括可以字面解釋的純文本內容
- 文本節點一般是作為元素節點的子節點存在的
- 獲取文本節點時，一般先要獲取元素節點。在通過元素節點獲取文本節點
- 例如：
– 元素節點.firstChild;
– 獲取元素節點的第一個子節點，一般為文本節點
④屬性節點：指的是標簽的屬性 例如：img的屬性值為src
- 屬性節點表示的是標簽中的一個的屬性，這里要注意的是屬性節點并非是元素節點的子節點， 而是元素節點的一部分
- 可以通過元素節點來獲取指定的屬性節點
- 例如：
– 元素節點.getAttributeNode("屬性名");
注意！！！：我們一般不使用屬性節點。
⑤注釋節點：指的是注釋
4、HTML DOM屬性
①、nodeName 屬性: 節點的名稱，是只讀的。
（1）. 元素節點的 nodeName 與標簽名相同
（2）. 屬性節點的 nodeName 是屬性的名稱
（3）. 文本節點的 nodeName 永遠是 #text
（4）. 檔案節點的 nodeName 永遠是 #document
②、nodeValue 屬性：節點的值
（1）. 元素節點的 nodeValue 是 undefined 或 null
（2）. 文本節點的 nodeValue 是文本自身
（3）. 屬性節點的 nodeValue 是屬性的值
③、nodeType 屬性: 節點的型別，是只讀的。以下常用的幾種節點型別:
元素型別 節點型別
元素 1
屬性 2
文本 3
注釋 8
檔案 9
④、獲取元素節點的子節點
通過具體的元素節點呼叫
- childNodes
–屬性，表示當前節點的所有子節點
- firstChild
– 屬性，表示當前節點的第一個子節點
- lastChild
– 屬性，表示當前節點的最后一個子節點
⑤、獲取父節點和兄弟節點
通過具體的節點呼叫
- parentNode
– 屬性，表示當前節點的父節點
- previousSibling
– 屬性，表示當前節點的前一個兄弟節點
- nextSibling
– 屬性，表示當前節點的后一個兄弟節點
⑥、元素節點的屬性
? 獲取:元素物件.屬性名
例：element.value
element.id
element.className
? 設定，元素物件.屬性名=新的值
例：element.value = "hello"
element.id = "id01"
element.className = "newClass"
⑦其他屬性
nodeValue
– 文本節點可以通過nodeValue屬性獲取和設定文本節點的內容
innerHTML
– 元素節點通過該屬性獲取和設定標簽內部的html代碼
5、HTML DOM方法
①HTML DOM訪問（訪問獲取HTML元素）
通過document物件呼叫
- getElementById() 通過id屬性獲取一個元素節點物件
- getElementsByTagName() 通過標簽名獲取一組元素節點物件
- getElementsByName() 通過name屬性獲取一組元素節點物件
- getElementsByClassName() 通過標類名獲取一組元素節點物件，該方法不支持IE8以下版本
②節點的修改
這里的修改我們主要指對元素節點的操作
? 創建節點
– document.createElement("標簽名")
? 洗掉節點
– 父節點.removeChild(子節點)
? 替換節點
– 父節點.replaceChild(新節點 , 舊節點)
? 插入節點
– 父節點.appendChild(子節點)
– 父節點.insertBefore(新節點 , 舊節點)
6、通過JS修改或讀取HTML元素的樣式（可以修改屬性值，也可以讀取屬性值）
語法：元素.style.屬性（又稱樣式名）=屬性值 （又稱樣式值）
讀取方式：元素.style.樣式名
通過style屬性設定和讀取的都是行內樣式
7、通過JS讀取元素的當前樣式（只讀取，不能修改）
①只有IE支持該屬性，其他瀏覽器不兼容 （currentStyle屬性）
語法：元素.currentStyle.屬性名 或 元素.currentStyle[屬性名]
注意：currentStyle可以用來讀取當前元素正在顯示的樣式，如果當前元素沒有設定該樣式，則獲取它的默認值。例如：如果沒有設定width，獲取到的值為auto
②其他瀏覽器可以使用，IE8以下的不支持的方法（getComputedStyle()方法）
引數說明：
1.需要獲取樣式的元素
2.可以傳遞一個偽元素，一般都傳null
說明：該方法回傳一個物件，物件中封裝了當前元素對應的樣式
var obj=getComputedStyle(element,null);//該方法的使用說明
獲取元素顯示樣式：
obj.屬性名 或則 obj["屬性名"]
如果獲取的樣式沒有設定，則會獲取到真實的值，而不是默認值。
例如：如果沒有設定width，獲取到的值為1200px(元素實際的值)
8、總結Element屬性和方法
屬性： ①節點
element.childNodes 回傳元素子節點的 NodeList。
element.parentNode 回傳元素的父節點。
element.nodeName 回傳元素的名稱。
element.nodeType 回傳元素的節點型別。
element.nodeValue 設定或回傳元素值。
nodelist.length 回傳 NodeList 中的節點數。
②基本標簽
element.className 設定或回傳元素的 class 屬性。
element.id 設定或回傳元素的 id。
element.innerHTML 設定或回傳元素的內容。
element.tagName 回傳元素的標簽名。
element.textContent 設定或回傳節點及其后代的文本內容。
element.title 設定或回傳元素的 title 屬性。
③寬度距離等
element.clientHeight 回傳元素的可見高度。
element.clientWidth 回傳元素的可見寬度。
element.offsetHeight 回傳元素的高度。
element.offsetWidth 回傳元素的寬度。
element.offsetLeft 回傳元素的水平偏移位置。
element.scrollHeight 回傳元素的整體高度。
element.scrollLeft 回傳元素左邊緣與視圖之間的距離。
element.scrollTop 回傳元素上邊緣與視圖之間的距離。
element.scrollWidth 回傳元素的整體寬度。
方法：element.appendChild() 向元素添加新的子節點，作為最后一個子節點。
element.getAttribute() 回傳元素節點的指定屬性值。
element.getAttributeNode() 回傳指定的屬性節點。
element.insertBefore() 在指定的已有的子節點之前插入新節點。
element.isSameNode() 檢查兩個元素是否是相同的節點。
element.normalize() 合并元素中相鄰的文本節點，并移除空的文本節點。
element.removeAttribute() 從元素中移除指定屬性。
element.removeAttributeNode() 移除指定的屬性節點，并回傳被移除的節點。
element.removeChild() 從元素中移除子節點。
element.replaceChild() 替換元素中的子節點。
element.getElementsByTagName() 回傳擁有指定標簽名的所有子元素的集合。
element.hasAttribute() 如果元素擁有指定屬性，則回傳true，否則回傳 false。
element.hasAttributes() 如果元素擁有屬性，則回傳 true，否則回傳 false。
element.hasChildNodes() 如果元素擁有子節點，則回傳 true，否則 false。
element.setAttribute() 把指定屬性設定或更改為指定值。
element.setAttributeNode() 設定或更改指定屬性節點。
element.toString() 把元素轉換為字串。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/57661.html
標籤：JavaScript