~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：韋永桂
撰寫時間：2020 年04 月 26 日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
一、簡介
- DOM，全稱Document Object Model檔案物件模型
- JS中通過DOM來對HTML檔案進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面。
- 檔案表示的就是整個的HTML網頁檔案
- 物件表示將網頁中的每一個部分都轉換為了一個物件
- 使用模型來表示物件之間的關系，這樣方便我們獲取物件
1、節點：
- 節點Node，是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱為是一個節點
- 比如：html標簽、屬性、文本、注釋、整個檔案等都是一個節點
- 雖然都是節點，但是實際上他們的具體型別是不同的
- 比如：標簽我們稱為元素節點、屬性稱為屬性節點、文本稱為文本節點、檔案稱為檔案節點
- 節點的型別不同，屬性和方法也都不盡相同。
節點：Node——構成HTML檔案最基本的單元。
常用節點分為四類
– 檔案節點：整個HTML檔案
– 元素節點：HTML檔案中的HTML標簽
– 屬性節點：元素的屬性
– 文本節點：HTML標簽中的文本內容
節點的屬性：
（1） nodeName節點名稱 ，是只讀的。
① 元素節點的 nodeName 與標簽名相同
② 屬性節點的 nodeName 是屬性的名稱
③ 文本節點的 nodeName 永遠是 #text
④ 檔案節點的 nodeName 永遠是 #document
（2） nodeValue節點的值。
①元素節點的 nodeValue 是 undefined 或 null
②文本節點的 nodeValue 是文本自身
③屬性節點的 nodeValue 是屬性的值
（3） nodeType 節點型別 ，是只讀的。以下常用的幾種節點型別:
2、檔案節點（document）：
- 檔案節點document，代表的是整個HTML檔案，網頁中的所有節點都是它的子節點。
- document物件作為window物件的屬性存在的，我們不用獲取可以直接使用
- 通過該物件我們可以在整個檔案訪問內查找節點物件，并可以通過該物件創建各種節點物件
3、元素節點（Element）
-HTML中的各種標簽都是元素節點，這也是我們最常用的一個節點。
- 瀏覽器會將頁面中所有的標簽都轉換為一個元素節點，我們可以通過document的方法來獲取元素節點。
- 比如：
–document.getElementById()
– 根據id屬性值獲取一個元素節點物件。
4、文本節點（Text）
- 文本節點表示的是HTML標簽以外的文本內容，任意非HTML的文本都是文本節點。
- 它包括可以字面解釋的純文本內容
- 文本節點一般是作為元素節點的子節點存在的
- 獲取文本節點時，一般先要獲取元素節點。在通過元素節點獲取文本節點
- 例如：
– 元素節點.firstChild;
– 獲取元素節點的第一個子節點，一般為文本節點
5、屬性節點（Attr）
- 屬性節點表示的是標簽中的一個的屬性，這里要注意的是屬性節點并非是元素節點的子節點，而是元素節點的一部分
- 可以通過元素節點來獲取指定的屬性節點
- 例如：
– 元素節點.getAttributeNode("屬性名");
注意！！！：一般不使用屬性節點。
二、DOM節點的操作
1、獲取元素節點
通過document物件呼叫
-getElementById() 通過id屬性獲取一個元素節點物件
- getElementsByTagName()通過標簽名獲取一組元素節點物件
-getElementsByName() 通過name屬性獲取一組元素節點物件
-getElementsByClassName() 通過標類名獲取一組元素節點物件，該方法不支持IE8及以下版本
2、獲取元素節點的子節點
通過具體的元素節點呼叫
-getElementsByTagName()
–方法，回傳當前節點的指定標簽名后代節點
-childNodes
–屬性，表示當前節點的所有子節點
-firstChild
– 屬性，表示當前節點的第一個子節點
-lastChild
– 屬性，表示當前節點的最后一個子節點
3、獲取父節點和兄弟節點
通過具體的節點呼叫
-parentNode
– 屬性，表示當前節點的父節點
-previousSibling
– 屬性，表示當前節點的前一個兄弟節點
-nextSibling
– 屬性，表示當前節點的后一個兄弟節點
4、元素節點的屬性
? 獲取:元素物件.屬性名
例：element.value
element.id
element.className
? 設定，元素物件.屬性名=新的值
例：element.value ="hello"
element.id= "id01"
element.className= "newClass"
其他屬性
nodeValue
– 文本節點可以通過nodeValue屬性獲取和設定文本節點的內容
innerHTML
– 元素節點通過該屬性獲取和設定標簽內部的html代碼
5、使用CSS選擇器進行查詢
querySelector()
querySelectorAll()
- 這兩個方法都是用document物件來呼叫，兩個方法使用相同，都是傳遞一個選擇器字串作為引數，方法會自動根據選擇器字串去網頁中查找元素。
- 不同的地方是querySelector()只會回傳找到的第一個元素，而querySelectorAll()會回傳所有符合條件的元素。
6、節點的修改
這里的修改我們主要指對元素節點的操作
? 創建節點
– document.createElement("標簽名")
? 洗掉節點
– 父節點.removeChild(子節點)
? 替換節點
– 父節點.replaceChild(新節點 , 舊節點)
? 插入節點
– 父節點.appendChild(子節點)
– 父節點.insertBefore(新節點 , 舊節點)
三、獲取元素的樣式
1、JS修改元素的樣式：元素.style.樣式名=樣式值（讀取方式：元素.style.樣式名）。
通過style屬性設定和讀取的都是行內樣式
2、獲取元素的當前顯示樣式（語法：元素.currentStyle.屬性名 或 元素.currentStyle[屬性名]）
currentStyle可以用來讀取當前元素正在顯示的樣式，如果當前元素沒有設定該樣式，則獲取它的默認值。例如：如果沒有設定width，獲取到的值為auto
注意：！！！該屬性只有IE支持，其他的瀏覽器都不支持
3、在其他瀏覽器中可以使用
getComputedStyle()這個方法獲取當前元素的顯示樣式
這個方法是window的方法，可以直接使用
引數說明：
1.需要獲取樣式的元素
2.可以傳遞一個偽元素，一般都傳null
說明：該方法回傳一個物件，物件中封裝了當前元素對應的樣式
varobj=getComputedStyle(element,null);//該方法的使用說明
獲取元素顯示樣式：
obj.屬性名 或則 obj["屬性名"]
如果獲取的樣式沒有設定，則會獲取到真實的值，而不是默認值。
例如：如果沒有設定width，獲取到的值為1200px(元素實際的值)
注意：！！！該方法不支持IE8及以下的瀏覽器
getComputedStyle()方法與currentStyle屬性都是只讀的屬性，不能修改屬性，
如果需要修改屬性的值，只能使用style屬性
四、元素的屬性與方法
Element屬性和方法
下面的屬性和方法可用于所有 HTML 元素上：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/58580.html
標籤：JavaScript
上一篇：正則運算式總結
下一篇：在Publii搭建博客使用了自定義字體，自定義字體在本地預覽正常，但上傳到Github后在線查看博客，自定義字體的顯示跟本地預覽的不一樣，該如何解決？