前端開發中，JavaScript DOM 是經常出現在面試題中的重要知識點之一，它是指文檔對象模型（Document Object Model），一種操作 HTML 和 XML 文檔的編程接口。 1. 如何添加元素到已有的 HTML 頁面？

我們可以使用 DOM 提供的 createElement() 方法創建一個元素節點，再用 appendChild() 方法將其添加到父元素節點中。

// 創建元素節點
var newElement = document.createElement('div');
// 添加文本節點
var textNode = document.createTextNode('這是新添加的元素');
newElement.appendChild(textNode);
// 添加到父元素中
document.getElementById('parent').appendChild(newElement);

2. 如何更改元素的樣式？

使用 DOM 提供的樣式屬性可以輕松更改元素樣式，例如 color、backgroundColor、fontSize 等。

// 獲取元素
var element = document.getElementById('element');
// 修改樣式
element.style.color = '#fff';
element.style.backgroundColor = '#000';
element.style.fontSize = '14px';

3. 如何獲取元素的屬性？

使用 DOM 提供的屬性可以獲取元素的屬性，例如 className、id、href 等。

// 獲取元素
var element = document.getElementById('mylink');
// 獲取 href 屬性
var linkHref = element.href;
// 獲取 class 屬性
var linkClass = element.className;

4. 如何遍歷 DOM 樹？

使用 DOM 提供的遍歷方法可以輕松訪問整個 DOM 樹，例如使用 childNodes 屬性可以訪問子節點，parentNode 屬性可以訪問父節點。

// 獲取元素
var element = document.getElementById('element');
// 遍歷子節點
var children = element.childNodes;
for (var i = 0; i< children.length; i++) {
console.log(children[i]);
}
// 訪問父節點
var parent = element.parentNode;
console.log(parent);

5. 如何在表單中獲取用戶輸入的值？

使用 DOM 提供的表單屬性可以獲取用戶輸入的值，例如使用 value 屬性可以獲取用戶在文本框中輸入的值。

// 獲取輸入框元素
var inputElement = document.getElementById('myinput');
// 獲取用戶輸入的值
var inputValue = inputElement.value;

6. 如何為元素添加事件處理程序？

使用 DOM 提供的事件屬性和方法可以為元素添加事件處理程序，例如使用 onclick 屬性可以添加點擊事件處理程序。

// 獲取元素
var element = document.getElementById('myButton');
// 添加點擊事件處理程序
element.onclick = function() {
alert('按鈕被點擊了！');
}

總之，在前端開發中，掌握 JavaScript DOM 是非常重要的基礎知識。希望以上面試題能夠幫助你更好地理解和應用 DOM 技術，為未來的前端開發和面試做好準備。