DOM（Document Object Model）是一種用于訪問和操作HTML和XML文檔的編程接口。JavaScript通過DOM提供的方法和屬性可以對網頁的元素進行各種操作，比如修改元素的內容、樣式、屬性等。
下面是一些常見的對DOM元素的操作以及相應的代碼示例：
- 獲取元素 使用
document.querySelector()或document.querySelectorAll()方法來獲取元素。querySelector()返回匹配指定CSS選擇器的第一個元素，querySelectorAll()返回匹配指定CSS選擇器的所有元素。
const element = document.querySelector('.className'); // 通過類名獲取元素
const elements = document.querySelectorAll('p'); // 獲取所有的 p 元素
- 修改元素內容 使用元素的
innerHTML屬性可以獲取或設置元素的HTML內容，使用innerText或textContent屬性可以獲取或設置元素的純文本內容。
const element = document.querySelector('.className');
element.innerHTML = '<strong>新的內容</strong>'; // 設置元素的HTML內容
const content = element.innerHTML; // 獲取元素的HTML內容const element2 = document.querySelector('.className');
element2.innerText = '新的純文本內容'; // 設置元素的純文本內容
const textContent = element2.textContent; // 獲取元素的純文本內容
- 修改元素樣式 使用元素的
style屬性可以修改元素的CSS樣式。
const element = document.querySelector('.className');
element.style.color = 'red'; // 修改元素字體顏色
element.style.fontSize = '20px'; // 修改元素字體大小
- 修改元素屬性 使用元素的
setAttribute()和getAttribute()方法可以設置和獲取元素的屬性。
const element = document.querySelector('.className');
element.setAttribute('href', 'https://www.example.com'); // 設置元素的href屬性const link = element.getAttribute('href'); // 獲取元素的href屬性
- 添加或刪除元素 使用
document.createElement()方法創建新的元素，使用element.appendChild()方法將新元素添加到指定元素的子節點的末尾。
const parentElement = document.querySelector('.parent');
const newElement = document.createElement('div');
newElement.innerHTML = '新的元素';
parentElement.appendChild(newElement); // 將新元素添加到指定父元素的子節點的末尾
使用element.remove()方法可以刪除元素。
const element = document.querySelector('.className');
element.remove(); // 刪除元素
以上是對DOM元素進行常見操作的簡要介紹和示例代碼。通過DOM操作，我們可以實現對網頁元素的動態修改和交互。了解和熟練掌握DOM操作是進行網頁開發的重要基礎。
)
)
)
