What's the DOM(什麼是DOM) | Javascript
文檔對象模型（DOM）是Web開發中的一個重要概念，充當一個接口，使腳本能夠動態訪問和更新HTML文檔的內容、結構和樣式。理解DOM以及如何操作才能開發交互式的Web應用網頁。
理解DOM:
DOM是HTML文檔的層次結構表示，其中每個元素、屬性和文本片段都被視為對象或是物件。JavaScript與DOM交互，使開發人員能夠操作文檔的結構和內容。
See the Pen What's the DOM(什麼是DOM)-Javascript by lenrich (@lenrich) on CodePen.
使用 JavaScript 進行DOM操作:
讓我們通過 JavaScript 的一個簡單例子來探索將元素添加到DOM中。
"use strict";
// HTML: <div id="container"></div>
// JavaScript
const container = document.getElementById('container');
// 創建一個新元素
const newElement = document.createElement('p');
newElement.textContent = '你好，DOM！';
// 將新元素添加到容器中
container.appendChild(newElement);
在這個例子中，我們選擇了具有ID container 的現有元素，並動態創建了一個新的段落元素（<p>），其文本為’你好，DOM！’。然後，我們將這個新元素附加到容器中。
DOM操作的優勢:
- 動態內容: 在不重新加載整個頁面的情況下動態更新內容。
- 交互式用戶界面: 及時反饋用戶操作，創造高互動的網頁。
Tags