DOM（Document Object Model，文檔對象模型）是HTML和XML文檔的編程接口。它將文檔解析為一個由節點和對象（包含屬性和方法）組成的結構集合。通過DOM，開發者可以使用JavaScript來操作HTML文檔的內容、結構和樣式。
DOM的核心思想是將整個HTML文檔視為一個樹形結構，每個HTML元素都是一個節點（Node）。這些節點可以是元素節點、文本節點、屬性節點等。通過DOM，開發者可以訪問和操作這些節點，從而實現動態的網頁交互。
DOM樹是由HTML文檔中的元素、屬性和文本組成的層次結構。每個HTML標簽在DOM中都是一個節點，節點之間通過父子關系連接。例如：
<!DOCTYPE html>
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>這是一個段落。</p>
</body>
</html>
在這個例子中，<html>是根節點，<head>和<body>是它的子節點，<title>和<h1>、<p>分別是<head>和<body>的子節點。
在JavaScript中，可以通過多種方式獲取DOM元素：
document.getElementById(id): 通過元素的id屬性獲取元素。 const element = document.getElementById('myId');
document.getElementsByClassName(className): 通過元素的class屬性獲取元素集合。 const elements = document.getElementsByClassName('myClass');
document.getElementsByTagName(tagName): 通過標簽名獲取元素集合。 const elements = document.getElementsByTagName('div');
document.querySelector(selector): 通過CSS選擇器獲取第一個匹配的元素。 const element = document.querySelector('.myClass');
document.querySelectorAll(selector): 通過CSS選擇器獲取所有匹配的元素集合。 const elements = document.querySelectorAll('div.myClass');
可以通過以下方式修改元素的內容：
innerHTML: 獲取或設置元素的HTML內容。 element.innerHTML = '<strong>新內容</strong>';
textContent: 獲取或設置元素的文本內容。 element.textContent = '新文本內容';
可以通過以下方式修改元素的屬性：
setAttribute(name, value): 設置元素的屬性。 element.setAttribute('class', 'newClass');
getAttribute(name): 獲取元素的屬性值。 const className = element.getAttribute('class');
removeAttribute(name): 移除元素的屬性。 element.removeAttribute('class');
可以通過以下方式修改元素的樣式：
style: 直接修改元素的樣式屬性。 element.style.color = 'red';
element.style.backgroundColor = 'yellow';
classList: 操作元素的類名。 element.classList.add('newClass'); // 添加類名
element.classList.remove('oldClass'); // 移除類名
element.classList.toggle('active'); // 切換類名
可以通過以下方式創建和插入新元素：
createElement(tagName): 創建一個新的元素節點。 const newElement = document.createElement('div');
appendChild(node): 將新元素插入到父元素的末尾。 parentElement.appendChild(newElement);
insertBefore(newNode, referenceNode): 將新元素插入到參考節點之前。 parentElement.insertBefore(newElement, referenceElement);
可以通過以下方式刪除元素：
removeChild(node): 從父元素中移除子元素。 parentElement.removeChild(childElement);
remove(): 直接從DOM中移除元素。 element.remove();
可以通過以下方式為元素添加事件監聽器：
addEventListener(event, callback): 為元素添加事件監聽器。 element.addEventListener('click', function() {
alert('元素被點擊了！');
});
removeEventListener(event, callback): 移除事件監聽器。 element.removeEventListener('click', callbackFunction);
DOM是JavaScript操作HTML文檔的核心接口，通過DOM，開發者可以動態地修改網頁的內容、結構和樣式。掌握常用的DOM操作，如獲取元素、修改內容、屬性和樣式、創建和插入元素、刪除元素以及事件處理，是前端開發的基礎技能之一。通過靈活運用這些操作，開發者可以創建出更加動態和交互性強的網頁應用。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
