JS創建DOM詳解

一、常見的DOM操作

DOM（Document Object Model）是用來描述HTML文檔結構的一種樹形結構，通過它可以對HTML頁面進行操作。JS創建DOM的方法有以下幾種：

1. createElement()

這個方法可以在內存中創建一個新的HTML節點，並把它返回，但是在頁面上不會顯示。如果需要讓它顯示，還需要使用appendChild()方法將它添加到其他節點上。

var newP = document.createElement('p');
newP.innerHTML = '這是新的一段文字';
document.body.appendChild(newP);

2. createTextNode()

這個方法可以創建一個純文本節點，也需要使用appendChild()方法將它添加到其他節點上。

var textNode = document.createTextNode('這是純文本');
document.body.appendChild(textNode);

3. setAttribute()

這個方法可以設置HTML節點的屬性，包括class, id等等。

var newLink = document.createElement('a');
newLink.setAttribute('href', 'https://www.example.com');
newLink.innerHTML = '點擊跳轉';
document.body.appendChild(newLink);

4. removeChild()

這個方法可以刪除一個節點。

var toBeDeleted = document.getElementById('toBeDeleted');
var parent = toBeDeleted.parentNode;
parent.removeChild(toBeDeleted);

二、通過innerHTML創建DOM

在JS中有一個innerHtml屬性，它可以用來操作HTML節點，包括創建、修改、刪除等操作。以下是通過innerHTML屬性創建HTML節點的例子：

var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>這是新的一段文字。</p>';
document.body.appendChild(newDiv);

三、插入節點

在JS中有兩個方法可以用來插入節點，一個是appendChild()方法，一個是insertBefore()方法。以下分別對它們進行介紹：

1. appendChild()

這個方法可以把一個節點添加到另一個節點的最後面。

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.appendChild(child);

2. insertBefore()

這個方法可以把一個節點添加到另一個節點的指定位置。

var parent = document.getElementById('parent');
var newChild = document.createElement('div');
newChild.innerHTML = '<p>這是新的一段文字。</p>';
var child = document.getElementById('child');
parent.insertBefore(newChild, child);

四、操作節點的樣式、類、ID

JS也可以通過DOM操作節點的樣式、類、ID等等。以下是具體的例子：

1. 操作節點樣式

var elem = document.getElementById('myDiv');
elem.style.color = 'red';
elem.style.backgroundColor = 'blue'

2. 操作節點類名

var elem = document.getElementById('myDiv');
elem.className = 'newClass';

3. 操作節點ID

var elem = document.getElementById('myDiv');
elem.id = 'newId';

五、事件監聽器

JS可以通過事件監聽器來響應頁面上的用戶操作。以下是一個具體的例子：

var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  alert('Hello World!');
});

這個例子中，當用戶點擊id為myButton的按鈕時，會彈出一個包含「Hello World!」文字的對話框。