一、DOM檔案物件模型
DOM
- DOM，全稱Document Object Model檔案物件模型
- JS中通過DOM來對HTML檔案進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面。
檔案
- 檔案表示的就是整個的HTML網頁檔案
物件
- 物件表示將網頁中的每一個部分都轉換為了一個物件
模型
- 使用模型來表示物件之間的關系，這樣方便我們獲取物件
二、DOM節點
/*
節點：
- 節點Node，是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱為是一個節點
- 比如：html標簽、屬性、文本、注釋、整個檔案等都是一個節點
- 雖然都是節點，但是實際上他們的具體型別是不同的
- 比如：標簽我們稱為元素節點、屬性稱為屬性節點、文本稱為文本節點、檔案稱為檔案節點
- 節點的型別不同，屬性和方法也都不盡相同。
節點：Node——構成HTML檔案最基本的單元。
常用節點分為四類：
– 檔案節點：整個HTML檔案
– 元素節點：HTML檔案中的HTML標簽
– 屬性節點：元素的屬性
– 文本節點：HTML標簽中的文本內容
節點的屬性：nodeName節點名稱 nodeType 節點型別 nodeValue節點的值
*/
/*
檔案節點（document）
- 檔案節點document，代表的是整個HTML檔案，網頁中的所有節點都是它的子節點。
- document物件作為window物件的屬性存在的，我們不用獲取可以直接使用
- 通過該物件我們可以在整個檔案訪問內查找節點物件，并可以通過該物件創建各種節點物件
*/
/*
元素節點（Element）
- HTML中的各種標簽都是元素節點，這也是我們最常用的一個節點。
- 瀏覽器會將頁面中所有的標簽都轉換為一個元素節點，我們可以通過document的方法來獲取
元素節點。
- 比如：
– document.getElementById()
– 根據id屬性值獲取一個元素節點物件。
*/
/*
文本節點（Text）
- 文本節點表示的是HTML標簽以外的文本內容，任意非HTML的文本都是文本節點。、
- 它包括可以字面解釋的純文本內容
- 文本節點一般是作為元素節點的子節點存在的
- 獲取文本節點時，一般先要獲取元素節點。在通過元素節點獲取文本節點
- 例如：
– 元素節點.firstChild;
– 獲取元素節點的第一個子節點，一般為文本節點
*/
/*
屬性節點（Attr）
- 屬性節點表示的是標簽中的一個的屬性，這里要注意的是屬性節點并非是元素節點的子節點，
而是元素節點的一部分
- 可以通過元素節點來獲取指定的屬性節點
- 例如：
– 元素節點.getAttributeNode("屬性名");
– 注意：是getAttributeNode（回傳屬性節點），不是getAttribute（回傳屬性的值）
例：<div id="box"></box>
<script>
var id1 = document.getElementById("box").getAttributeNode("id");
console.log(id1); //id="box" 回傳屬性的節點
var id2 = document.getElementById("box").getAttribute("id");
console.log(id2); //box 回傳屬性的值
</script>
*/
/*
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
*/
三、DOM節點的操作
/*獲取元素節點
通過document物件呼叫
- getElementById() 通過id屬性獲取一個元素節點物件
- getElementsByTagName() 通過標簽名獲取一組元素節點物件
- getElementsByName() 通過name屬性獲取一組元素節點物件
- getElementsByClassName() 通過標類名獲取一組元素節點物件，該方法不支持IE及以下版本
*/
/*獲取元素節點的子節點
通過具體的元素節點呼叫
- getElementsByTagName()
–方法，回傳當前節點的指定標簽名后代節點
- 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代碼
*/
/*使用CSS選擇器進行查詢
querySelector()
querySelectorAll()
- 這兩個方法都是用document物件來呼叫，兩個方法使用相同，都是傳遞一個選擇器字串作
為引數，方法會自動根據選擇器字串去網頁中查找元素。
- 不同的地方是querySelector()只會回傳找到的第一個元素，而querySelectorAll()會回傳所
有符合條件的元素。
*/
/*節點的修改
這里的修改我們主要指對元素節點的操作
? 創建節點
– document.createElement("標簽名")
? 洗掉節點
– 父節點.removeChild(子節點)
? 替換節點
– 父節點.replaceChild(新節點 , 舊節點)
? 插入節點
– 父節點.appendChild(子節點) 添加子節點
– 父節點.insertBefore(新節點 , 舊節點) 在一個指定的子節點之前插入一個節點。
*/
四、DOM獲取元素樣式
1、在IE中獲取元素當前顯示樣式
語法：元素.currentStyle.屬性名 或 元素.currentStyle[屬性名]
說明：currentStyle可以用來讀取當前元素正在顯示的樣式，如果當前元素沒有設定該樣式，則
獲取它的默認值。例如：如果沒有設定width，獲取到的值為auto
注意：！！！該屬性只有IE支持，其他的瀏覽器都不支持
2、在其它瀏覽器中后去元素當前顯示樣式
在其它瀏覽器中用getComputedStyle()這個方法獲取當前元素的顯示樣式，這個方法是window的
方法，可以直接使用
引數說明：
1. 需要獲取樣式的元素
2. 可以傳遞一個偽元素，一般都傳null
說明：該方法回傳一個物件，物件中封裝了當前元素對應的樣式
var obj=getComputedStyle(element,null);//該方法的使用說明
獲取元素顯示樣式：
obj.屬性名 或則 obj["屬性名"]
如果獲取的樣式沒有設定，則會獲取到真實的值，而不是默認值。
例如：如果沒有設定width，獲取到的值為1200px(元素實際的值)
注意：！！！該方法不支持IE8及以下的瀏覽器
注意：getComputedStyle()方法與currentStyle屬性都是只讀的屬性，不能修改屬性，如果需要修
改屬性的值，只能使用style屬性
五、DOM元素的屬性與方法
/*Element屬性和方法
下面的屬性和方法可用于所有 HTML 元素上：
屬性 / 方法 描述
element.accessKey 設定或回傳元素的快捷鍵。
element.appendChild() 向元素添加新的子節點，作為最后一個子節點。
element.attributes 回傳元素屬性的 NamedNodeMap。
element.childNodes 回傳元素子節點的 NodeList。
element.className 設定或回傳元素的 class 屬性。
element.clientHeight 回傳元素的可見高度。
element.clientWidth 回傳元素的可見寬度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比較兩個元素的檔案位置。
element.contentEditable 設定或回傳元素的文本方向。
element.dir 設定或回傳元素的內容是否可編輯。
element.firstChild 回傳元素的首個子。
element.getAttribute() 回傳元素節點的指定屬性值。
element.getAttributeNode() 回傳指定的屬性節點。
element.getElementsByTagName() 回傳擁有指定標簽名的所有子元素的集合。
element.getFeature() 回傳實作了指定特性的 API 的某個物件。
element.getUserData() 回傳關聯元素上鍵的物件。
element.hasAttribute() 如果元素擁有指定屬性，則回傳true，否則回傳 false。
element.hasAttributes() 如果元素擁有屬性，則回傳 true，否則回傳 false。
element.hasChildNodes() 如果元素擁有子節點，則回傳 true，否則 false。
element.id 設定或回傳元素的 id。
element.innerHTML 設定或回傳元素的內容。
element.insertBefore() 在指定的已有的子節點之前插入新節點。
element.isContentEditable 設定或回傳元素的內容。
element.isDefaultNamespace()如果指定的namespaceURI是默認的，則回傳 true，否則回傳 false。
element.isEqualNode() 檢查兩個元素是否相等。
element.isSameNode() 檢查兩個元素是否是相同的節點。
element.isSupported() 如果元素支持指定特性，則回傳 true。
element.lang 設定或回傳元素的語言代碼。
element.lastChild 回傳元素的最后一個子元素。
element.namespaceURI 回傳元素的 namespace URI。
element.nextSibling 回傳位于相同節點樹層級的下一個節點。
element.nodeName 回傳元素的名稱。
element.nodeType 回傳元素的節點型別。
element.nodeValue 設定或回傳元素值。
element.normalize() 合并元素中相鄰的文本節點，并移除空的文本節點。
element.offsetHeight 回傳元素的高度。
element.offsetWidth 回傳元素的寬度。
element.offsetLeft 回傳元素的水平偏移位置。
element.offsetParent 回傳元素的偏移容器。
element.offsetTop 回傳元素的垂直偏移位置。
element.ownerDocument 回傳元素的根元素（檔案物件）。
element.parentNode 回傳元素的父節點。
element.previousSibling 回傳位于相同節點樹層級的前一個元素。
element.removeAttribute() 從元素中移除指定屬性。
element.removeAttributeNode() 移除指定的屬性節點，并回傳被移除的節點。
element.removeChild() 從元素中移除子節點。
element.replaceChild() 替換元素中的子節點。
element.scrollHeight 回傳元素的整體高度。
element.scrollLeft 回傳元素左邊緣與視圖之間的距離。
element.scrollTop 回傳元素上邊緣與視圖之間的距離。
element.scrollWidth 回傳元素的整體寬度。
element.setAttribute() 把指定屬性設定或更改為指定值。
element.setAttributeNode() 設定或更改指定屬性節點。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把物件關聯到元素上的鍵。
element.style 設定或回傳元素的 style 屬性。
element.tabIndex 設定或回傳元素的 tab 鍵控制次序。
element.tagName 回傳元素的標簽名。
element.textContent 設定或回傳節點及其后代的文本內容。
element.title 設定或回傳元素的 title 屬性。
element.toString() 把元素轉換為字串。
nodelist.item() 回傳 NodeList 中位于指定下標的節點。
nodelist.length 回傳 NodeList 中的節點數。
*/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/57667.html
標籤：JavaScript