JavaScript的DOM（文檔對象模型）在前端開發中扮演著重要的角色，允許開發人員以編程的方式操縱HTML和CSS。DOM的目的是為了使編程人員能夠更輕松地修改和操作網頁中的元素。 DOM的操作可以對整個文檔進行，也可以對單個元素進行。下面，我將舉例說明一些經常使用的DOM操作。 將元素添加到DOM中 首先，我們來看一下如何將元素添加到DOM中。假設我們有一個帶有"id"屬性的元素，我們可以通過下面的JavaScript代碼將其添加到DOM中。

let div = document.createElement('div');
div.id = 'myNewDiv';
document.body.appendChild(div);

這段代碼會創建一個'div'元素并將其添加到文檔體的末尾。我們還可以將其添加到任何其他元素中。例如，如果我們想將其添加到具有"id=parent"的元素中，則代碼如下所示。

let parentDiv = document.getElementById('parent');
parentDiv.appendChild(div);

更改元素的CSS樣式 下一個常見的DOM操作是更改元素的CSS樣式。我們可以使用以下代碼更改元素的CSS屬性。

let myElement = document.getElementById('myElement');
myElement.style.backgroundColor = 'red';
myElement.style.color = 'white';

這段代碼將更改具有"id=myElement"的元素的背景顏色和文本顏色。 獲取元素的值 有時候我們需要獲取輸入框或其他表單元素的值。我們可以使用以下代碼輕松地獲取這些值。

let myInput = document.getElementById('myInput');
let inputVal = myInput.value;
console.log(inputVal);

這段代碼將打印輸入框的值，例如，在控制臺中打印"inputVal"將顯示輸入框的當前內容。 更改元素內容 有時候我們需要更改元素的文本內容。我們可以使用以下代碼更改元素的內容。

let myElement = document.getElementById('myElement');
myElement.innerText = 'New Text';

這段代碼將更改具有"id=myElement"的元素的文本內容。 刪除元素 最后，我們來看一下如何在DOM中刪除元素。我們可以使用以下代碼刪除特定元素。

let myElement = document.getElementById('myElement');
myElement.remove();

這段代碼將從DOM中刪除具有"id=myElement"的元素。 結論 以上是一些常見的DOM操作。可以看到，使用JavaScript的DOM，我們可以輕松地操縱HTML和CSS。DOM是前端開發中不可或缺的組成部分，可以為我們的網站和應用程序帶來更高的可維護性和可訪問性。