本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
HTML和CSS系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！
點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！?
系列文章目錄?
JavaScript- 1.1 行內、內部、外部三種引用方式
JavaScript- 1.2?ECMA基本語法和控制流
JavaScript- 1.3 DOM對頁面內容進行操作
JavaScript- 1.4 BOM對瀏覽器進行操作??
目錄
系列文章目錄?
前言
一、DOM操作
1. 訪問DOM元素
2. 修改DOM元素
3. 創建和添加DOM元素
4. 刪除DOM元素
5. 事件處理
6.總結
?二、代碼實踐
總結
前言
小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！
一、DOM操作
JavaScript的DOM（Document Object Model，文檔對象模型）操作允許開發者動態地訪問、修改、添加或刪除HTML和XML文檔的內容、結構及樣式。以下是對DOM操作的主要方面的詳細說明：
1. 訪問DOM元素
在操作DOM之前，首先需要獲取到目標元素。JavaScript提供了多種方法來訪問DOM元素：
-
getElementById()：通過元素的ID屬性獲取元素。
javascriptlet element = document.getElementById('elementId');
-
getElementsByClassName()：通過類名獲取元素集合。
javascriptlet elements = document.getElementsByClassName('className'); -
getElementsByTagName()：通過標簽名獲取元素集合。
javascriptlet elements = document.getElementsByTagName('div'); -
querySelector()?和?querySelectorAll()：使用CSS選擇器獲取單個或多個元素。
javascriptlet element = document.querySelector('#elementId'); let elements = document.querySelectorAll('.className');
2. 修改DOM元素
獲取到元素后，可以對其進行多種修改：
- 修改內容：
- textContent：修改元素的文本內容。
javascriptelement.textContent = 'New text content'; - innerHTML：修改元素的HTML內容（可以包含HTML標簽）。
javascriptelement.innerHTML = '<strong>New HTML content</strong>';
- textContent：修改元素的文本內容。
- 修改樣式：
- 通過style屬性直接修改元素的樣式。
javascriptelement.style.color = 'red'; element.style.backgroundColor = '#f0f0f0';
- 通過style屬性直接修改元素的樣式。
- 修改屬性：
- 使用getAttribute()和setAttribute()來獲取和設置元素的屬性。
javascriptlet value = element.getAttribute('data-value'); element.setAttribute('data-value', 'newValue');
- 使用getAttribute()和setAttribute()來獲取和設置元素的屬性。
3. 創建和添加DOM元素
可以動態地創建新的元素并將其添加到DOM中：
-
創建新元素：
javascriptlet newElement = document.createElement('div'); -
添加元素：
- appendChild()：將元素添加到父元素的末尾。
javascriptparentElement.appendChild(newElement); - insertBefore()：在指定元素之前插入新元素。
javascriptparentElement.insertBefore(newElement, referenceElement);
- appendChild()：將元素添加到父元素的末尾。
4. 刪除DOM元素
可以使用removeChild()方法來刪除DOM中的元素：
javascript
parentElement.removeChild(childElement);5. 事件處理
DOM操作還包括對事件的響應，通過事件監聽器來實現用戶交互：
- 添加事件監聽器：
javascriptelement.addEventListener('click', function() {alert('Element clicked!'); });
6.總結
通過JavaScript的DOM操作，開發者可以實現對網頁內容的動態控制，這為創建交互式和動態網頁應用提供了強大的工具。通過訪問、修改、創建、刪除元素以及處理事件，開發者可以構建出功能豐富、用戶體驗良好的網頁應用。
?二、代碼實踐
代碼如下：
HTML
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM對頁面內容進行操作</title></head><body><p id="p1">這是一段文字</p><button type="button" onclick="document.getElementById('p1').style.fontSize='50px'">點擊按鈕改變字號</button></body>
</html>代碼運行如下：
總結
以上就是今天要講的內容，本文簡單記錄了DOM對頁面內容進行操作，僅作為一份簡單的筆記使用，大家根據注釋理解
)
