Document 對象提供了可以創建元素節點、屬性節點和文本節點的方法，方便 DOM 更新 HTML 頁面中的元素。 ## 創建元素節點 Document 對象提供了 createElement() 方法創建元素節點，其語法格式如下: ```javascript element = document.createElement(tagName); ``` 上述語法格式中，tagName 是參數，表示創建元素的元素名稱。element 是返回值，表示創建的元素。 > **值得注意的是:** createElement() 方法優先將參數轉換為小寫。 下面是使用 createElement() 方法的示例代碼: ```javascript var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); div.appendChild(elem); ``` 上述示例代碼通過 createElement() 方法創建了 button 元素，并將其添加到 HTML 頁面中。 ## 創建文本節點 Document 對象提供了 createTextNode() 方法創建文本節點，其語法格式如下: ```javascript textNode = document.createTextNode(data); ``` 上述語法格式中，data 是參數，包含了放在文本節點中的內容，是一個字符串。textNode 是返回值，表示創建的文本節點。 下面是使用 createTextNode() 方法的示例代碼: ```javascript var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); // 創建文本節點 var text = document.createTextNode('New Button'); // 將文本節點添加到新的元素節點 elem.appendChild(text); // 將新的元素節點添加到父級元素節點 div.appendChild(elem); ``` 上述示例代碼先通過 createElement() 方法創建了 button 元素，再通過 createTextNode() 方法創建了一個新的文本節點，并將其添加到新創建的 button 元素中。 ## 創建屬性節點 Document 對象提供了 createAtrribute() 方法創建屬性節點，其語法格式如下: ```javascript attributeNode = document.createAttribute(name); ``` 上述語法格式中，name 是參數，屬性節點的屬性名稱。attributeNode 是返回值，表示創建的屬性節點。 > **值得注意的是:** > > 1. 創建屬性節點方法只具有屬性名稱，沒有屬性值。想要設置屬性值需要通過 nodeValue 屬性完成。 > 2. 由于屬性節點不是元素節點的子節點，不能使用添加子節點方式操作屬性節點。想要添加屬性節點需要通過 setAttributeNode() 方法完成。 下面是使用 createAtrribute() 方法的示例代碼: ```javascript var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); // 創建文本節點 var text = document.createTextNode('New Button'); elem.appendChild(text); // 創建屬性節點 var attribute = document.createAttribute('class'); // 設置屬性的值 attribute.nodeValue = 'button'; // 將屬性節點添加到元素節點 elem.setAttributeNode(attribute); div.appendChild(elem); ``` 上述示例代碼先通過 createAtrribute() 方法創建了 ，再通過 createTextNode() 方法創建了一個新的文本節點，并將其添加到新創建的 button 元素中。最后，通過 createAttribute() 方法創建 class 屬性節點，并設置了屬性值為 button，再將該屬性節點添加到新創建的 button 元素中。