DOM操作可以說在JS中很常見。網頁的很多小功能，比如添加和刪除壹些元素，都可以通過JS來實現。那麽為了實現壹些功能，我們需要了解DOM中的哪些內容呢？今天，這篇文章將簡單地帶您進入JS中DOM操作的大門！！
壹、DOM樹的節點
1，DOM節點分為三類:元素節點（標簽節點）、屬性節點和文本節點。
屬性節點和文本節點都屬於元素節點的子節點。因此，在操作時，需要先選擇元素節點，然後修改屬性和文本。
查看元素節點
1，使用getElement系列方法:
具體的HTML代碼如下:
//按ID查看元素屬性
var Li = document . getelementbyid（“first“）；
//按類名查看元素屬性。
var lis 1 = document . getelementsbyclassname（“cls“）；
//按名稱查看元素屬性。
var lis 2 = document . getelementsbyname（“name“）；
//按標記名查看元素屬性。
var lis 3 = document . getelementsbytagname（“Li“）；註意事項:
（1）ID不能同名。如果ID重復，您只能獲得第壹個ID。
②獲取元素節點時，必須等到DOM樹加載完畢。
兩種處理方法:
A.在文檔末尾寫JS；
B.將代碼寫入window.onload函數；
（3）通過getElements系列獲取數組格式，必須獲取其中的每個元素才能操作，但不能直接操作數組。
文檔。getelementsbytagname（“Li“）【0】。click = function（）{ }④這壹系列方法也可以先選擇壹個DOM節點，從選擇的DOM節點中選擇需要的節點:
document . getelementbyid（“p 1“）。getElementsByTagName（“Li“）；通過查詢選擇器系列方法
①傳入選擇器名稱並返回找到的第壹個元素。通常用於查找ID:
var dq 1 = document . query selector（“# id“）；（2）傳入壹個選擇器名稱，並以數組格式返回所有找到的元素，無論找到多少個。這種方法比較通用，無論什麽屬性都能準確找到。
var dqs 1 = document . query selector all（“# p 1 Li“）；查看\設置屬性節點
1.查看屬性節點:。getAttribute（“屬性名“）；
2.設置屬性節點:。setAttribute（“屬性名”、“屬性值”）；
註意:。setAttribute（）在舊版本的IE中將存在兼容性問題，因此您可以使用。改為符號。
JS修改CSS的各種方法
1，使用setAttribute設置類和樣式。
document . getelementbyid（“first“）。set attribute（“class“，“class 1“）；
document . getelementbyid（“first“）。set attribute（“style“，“color:red；”);2.添加壹個帶有。類名。
document . getelementbyid（“first“）。class name =“class 1“；3.使用。風格。樣式來直接修改單個樣式。註意，樣式名稱必須使用駝峰命名法。
document . getelementbyid（“first“）style . font size =“18px“；4.使用。風格還是。style.cssText添加序列樣式:
// IE不兼容。
document . getelementbyid（“first“）。style =“color:red；”；
//所有瀏覽器都兼容
document . getelementbyid（“first“）style . CSS text =“color:red；；查看/設置文本節點
1,.innerHTML:獲取或設置節點中的HTML代碼。
2..innerText:獲取或設置節點中的文本，但不能設置HTML代碼。
二、分層節點操作
1.。childNodes:獲取當前節點的所有子節點（包括元素節點和文本節點）。
。children:獲取當前節點的所有子節點（文本節點除外）。
2.。parentNode:獲取當前節點的父節點。
3.。firstChild:獲取第壹個子節點，包括回車等文本節點；
。獲取第壹個元素節點。沒有文本節點；
。lastChild:獲取最後壹個子節點，包括回車等文本節點；
。lastElementChild:獲取最後壹個子節點，不包括文本節點；
4.。previousSibling:獲取當前節點的上壹個兄弟節點，包括文本節點；
。以前的選擇:獲取當前節點的previousElementSibling節點；
。nextSibling:獲取當前節點的下壹個兄弟節點，包括文本節點；
。nextElementSibling:獲取當前節點的下壹個元素兄弟節點；
5.。屬性:獲取當前節點的所有屬性節點。返回數組格式。
創建和添加節點
1.document.createElement（“標記名“）:創建壹個新節點並返回創建的新節點。
您需要用設置新節點的屬性。setAttribute（）。
2.父節點。insertBefore（新節點，目標節點）:在父節點中，在目標節點之前插入新節點。
父節點。appendChild:在父節點的末尾插入壹個新節點。
3.源節點。克隆節點（true）:克隆壹個節點。
傳入true意味著克隆源節點和源節點的所有子節點；
傳入false或not意味著只克隆當前節點，而不克隆子節點。
刪除和替換節點
1.父節點。從父節點中刪除指定的子節點。
2.父節點。replaceChild（新節點，舊節點）:從父節點用新節點替換舊節點。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上的其他相關文章！
推薦閱讀:
nodejs日誌模塊winston使用方法總結
JQuery具有在循環時間內自動改變樣式的功能。