知識點：
1、 DOM物件：全稱為Document Object Model檔案物件模型，JS中通過DOM來對HTML 檔案進行操作。
檔案：檔案表示整個HTML網頁檔案
物件：網頁表示的就是整個網頁檔案
模型：使用模型來表示物件之間的關系，方便獲取物件
節點：節點Node，是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱為是一個節點
比如：html標簽、屬性、文本、注釋、整個檔案等都是一個節點
雖然都是節點，但是實際上他們的具體型別是不同的
比如：標簽我們稱為元素節點、屬性稱為屬性節點、文本稱為文本節點、檔案稱為檔案節點
節點的型別不同，屬性和方法也都不盡相同。
節點：Node——構成HTML檔案最基本的單元。
常用節點分為四類
1） 檔案節點：整個HTML檔案
檔案節點document，代表的是整個HTML檔案，網頁中的所有節點都是它的子節點。
document物件作為window物件的屬性存在的，我們不用獲取可以直接使用
通過該物件我們可以在整個檔案訪問內查找節點物件，并可以通過該物件創建各種節點物件
元素節點：HTML檔案中的HTML標簽
2） HTML中的各種標簽都是元素節點，這也是我們最常用的一個節點。
瀏覽器會將頁面中所有的標簽都轉換為一個元素節點，我們可以通過document的方法來獲取元素節點。
比如： document.getElementById()
根據id屬性值獲取一個元素節點物件。
3） 屬性節點：元素的屬性
屬性節點表示的是標簽中的一個的屬性，這里要注意的是屬性節點并非是元素節點的子節點，而是元素節點的一部分
可以通過元素節點來獲取指定的屬性節點
例如：元素節點.getAttributeNode("屬性名");
注意！！！：我們一般不使用屬性節點。
4） 文本節點：HTML標簽中的文本內容
文本節點表示的是HTML標簽以外的文本內容，任意非HTML的文本都是文本節點。
它包括可以字面解釋的純文本內容
文本節點一般是作為元素節點的子節點存在的
獲取文本節點時，一般先要獲取元素節點。在通過元素節點獲取文本節點
例如：素節點.firstChild;
獲取元素節點的第一個子節點，一般為文本節點
節點的屬性：nodeName節點名稱 nodeType 節點型別 nodeValue節點的值
一、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
2、 DOM節點的操作
1）獲取元素節點通過document物件呼叫
- getElementById() 通過id屬性獲取一個元素節點物件
- getElementsByTagName() 通過標簽名獲取一組元素節點物件
- getElementsByName() 通過name屬性獲取一組元素節點物件
- getElementsByClassName() 通過標類名獲取一組元素節點物件，該方法不支持I E8及以下版本
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(新節點 , 舊節點)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/58593.html
標籤：非技術區
上一篇：js中如何清空查詢條件