面試題：DOM常見的操作有哪些
引言：
在前端開發中，DOM（文檔對象模型）操作是日常工作中不可或缺的一部分。DOM提供了一種以編程方式訪問和更新文檔內容、結構和樣式的接口。
任何html或 xml 文檔都可以用dom表示為一個由節點構成的層級結構
<div><p title="title">content</p >
</div>
上述結構中 div、p就是元素的節點 content就是文本的節點，title就是屬性節點
本文將詳細介紹DOM操作的五個基本方面：創建節點、查詢節點、更新節點、添加節點和刪除節點，并提供相應的代碼示例。
一、創建節點
來源： DOM API允許開發者動態地創建新的HTML元素，并將其添加到文檔中。
應用場景： 動態生成內容，如表單驗證消息、動態加載的列表項等。
創建節點是DOM操作中非常基礎且常用的操作之一。在JavaScript中，我們可以通過document.createElement方法來創建一個新的元素節點。下面是一些創建節點的詳細例子，包括創建不同類型的節點和設置它們的屬性。
創建元素節點
// 創建一個新的div元素
let newDiv = document.createElement('div');// 創建一個新的段落元素
let newParagraph = document.createElement('p');// 創建一個新的列表項元素
let newListItem = document.createElement('li');
創建文本節點
// 創建一個文本節點
let textNode = document.createTextNode('這是一個文本節點');
創建注釋節點
// 創建一個注釋節點
let commentNode = document.createComment('這是一個注釋');
創建屬性節點
// 創建一個屬性節點
let classAttribute = document.createAttribute('class');
classAttribute.value = 'my-class';
創建文檔片段節點
文檔片段節點是DOM操作中一個非常有用的工具，它允許開發者以一種高效的方式處理DOM元素
// 創建一個文檔片段節點
let docFragment = document.createDocumentFragment();
擴展
創建多個元素節點并設置屬性
// 創建多個元素節點并設置屬性
let list = document.createElement('ul');
for (let i = 1; i <= 5; i++) {let listItem = document.createElement('li');listItem.textContent = '列表項 ' + i;list.appendChild(listItem);
}
創建節點并添加到文檔中
// 創建一個div元素并添加到body中
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);
創建節點是構建動態網頁和應用的基礎，通過這些節點，我們可以構建出復雜的用戶界面和交互邏輯。
二、查詢節點
來源： DOM提供了多種方法來查詢文檔中的節點，如getElementById、getElementsByTagName、querySelector等。
應用場景： 獲取頁面元素以進行進一步操作，如事件綁定、樣式修改等。
querySelector
querySelector 方法返回文檔中匹配指定CSS選擇器的第一個元素。如果沒有找到匹配的元素，則返回 null。
用法：
element = document.querySelector(selectors);
參數：
selectors：一個字符串，包含一個或多個CSS選擇器，用于指定要返回的元素。
代碼用例：
// 獲取頁面中第一個id為"myElement"的元素
var element = document.querySelector('#myElement');
console.log(element); // 輸出匹配的元素// 獲取頁面中第一個類名為"myClass"的元素
var element = document.querySelector('.myClass');
console.log(element); // 輸出匹配的元素// 獲取頁面中第一個具有特定類名和id的元素
var element = document.querySelector('.myClass#myElement');
console.log(element); // 輸出匹配的元素
querySelectorAll
querySelectorAll 方法返回文檔中匹配指定CSS選擇器的所有元素的靜態（不實時更新） NodeList 集合。
用法：
elements = document.querySelectorAll(selectors);
參數：
selectors：一個字符串，包含一個或多個CSS選擇器，用于指定要返回的元素集合。
代碼用例：
// 獲取頁面中所有類名為"myClass"的元素
var elements = document.querySelectorAll('.myClass');
console.log(elements); // 輸出匹配的元素集合// 獲取頁面中所有具有特定類名和id的元素
var elements = document.querySelectorAll('.myClass#myElement');
console.log(elements); // 輸出匹配的元素集合// 遍歷所有匹配的元素
elements.forEach(function(element) {console.log(element); // 輸出每個匹配的元素
});
querySelector 和 querySelectorAll 是非常強大的工具，它們允許開發者使用CSS選擇器來查詢DOM元素。querySelector 返回第一個匹配的元素，而 querySelectorAll 返回所有匹配的元素。
三、更新節點
來源： DOM允許開發者修改已存在的節點內容或屬性。
應用場景： 更新頁面上的動態內容，如實時顯示時間、更新用戶狀態等。
在JavaScript中，更新DOM節點的內容和樣式是常見的操作。innerHTML、innerText、textContent和style屬性是用于更新節點內容和樣式的常用方法。下面將分別介紹這些屬性的概念和代碼用例。
innerHTML
innerHTML屬性用于獲取或設置指定元素的HTML內容。它返回元素內部的HTML標記，如果設置，則會替換元素內的所有內容。
代碼用例：
// 獲取元素的HTML內容
var content = document.getElementById('myElement').innerHTML;
console.log(content); // 輸出元素的HTML內容// 設置元素的HTML內容
document.getElementById('myElement').innerHTML = '<p>新的內容</p>';
innerText
innerText屬性用于獲取或設置指定元素及其子元素的文本內容。它返回元素內的純文本，忽略所有HTML標簽，如果設置，則會替換元素內的所有文本內容。
代碼用例：
// 獲取元素的文本內容
var text = document.getElementById('myElement').innerText;
console.log(text); // 輸出元素的文本內容// 設置元素的文本內容
document.getElementById('myElement').innerText = '新的文本內容';
textContent
textContent屬性用于獲取或設置指定元素及其子元素的文本內容。與innerText類似，它返回元素內的純文本，但不會忽略腳本和樣式元素。如果設置，則會替換元素內的所有文本內容。
代碼用例：
// 獲取元素的文本內容
var text = document.getElementById('myElement').textContent;
console.log(text); // 輸出元素的文本內容// 設置元素的文本內容
document.getElementById('myElement').textContent = '新的文本內容';
style
style屬性用于獲取或設置指定元素的樣式。通過這個屬性，可以訪問和修改元素的內聯樣式。
代碼用例：
// 獲取元素的樣式屬性
var style = document.getElementById('myElement').style;
console.log(style.color); // 輸出元素的文本顏色// 設置元素的樣式屬性
document.getElementById('myElement').style.color = 'red';
document.getElementById('myElement').style.fontSize = '20px';
結論
innerHTML、innerText、textContent和style屬性是更新DOM節點內容和樣式的強大工具。innerHTML和innerText用于獲取和設置元素的文本內容，但它們處理HTML的方式不同。textContent提供了一種獲取和設置純文本內容的方法，而style屬性允許開發者直接修改元素的樣式。
四、添加節點
來源： DOM提供了方法來將新創建或查詢到的節點添加到文檔的特定位置。
應用場景： 在頁面中動態插入新內容，如評論、廣告等。
在JavaScript中，向DOM中添加節點是通過一系列方法實現的。innerHTML、insertBefore、setAttribute和appendChild是其中一些常用的方法。下面將分別介紹這些方法的概念和代碼用例。
innerHTML
innerHTML屬性用于獲取或設置指定元素的HTML內容。雖然它主要用于獲取和設置內容，但也可以用來添加新內容，因為它會替換掉元素內的所有內容。
insertBefore
insertBefore方法用于在指定的父節點的子節點列表中的某個節點之前插入一個新的節點。它需要兩個參數：要插入的新節點和參照節點。
代碼用例：
// 獲取父節點和要插入的新節點
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '這是新添加的段落。';// 獲取參照節點
var referenceNode = document.getElementById('referenceElement');// 在參照節點之前插入新節點
parent.insertBefore(newNode, referenceNode);
setAttribute
setAttribute方法用于設置指定元素的屬性值。它需要兩個參數：要設置的屬性名和屬性值。
代碼用例：
// 獲取元素
var element = document.getElementById('myElement');// 設置元素的class屬性
element.setAttribute('class', 'new-class');
appendChild
appendChild方法用于將一個節點添加到指定父節點的子節點列表的末尾。它只接受一個參數：要添加的新節點。
代碼用例：
// 獲取父節點和要添加的新節點
var parent = document.getElementById('parentElement');
var newNode = document.createElement('p');
newNode.textContent = '這是新添加的段落。';// 將新節點添加到父節點的子節點列表末尾
parent.appendChild(newNode);
結論
innerHTML、insertBefore、setAttribute和appendChild是向DOM中添加節點的常用方法。innerHTML可以用來添加新內容，但會替換掉元素內的所有內容。insertBefore允許在特定位置插入新節點。setAttribute用于設置元素的屬性值。appendChild則將新節點添加到父節點的子節點列表末尾。
五、刪除節點
來源： DOM提供了方法來從文檔中移除節點。
應用場景： 清除不再需要的內容，如刪除表單中的錯誤消息、移除已處理的列表項等。
代碼示例：
// 刪除指定的節點
parentElement.removeChild(newDiv);
結語：
掌握DOM操作是前端開發的基礎技能之一。通過創建、查詢、更新、添加和刪除節點，我們可以靈活地控制頁面內容和結構。在實際開發中，合理運用這些操作可以極大地提升用戶體驗和頁面的交互性。希望本文的介紹和示例能夠幫助你更好地理解和運用DOM操作。
)
