JavaScript DOM 功能是讓 Web 開發變得更加靈活的一種技術。這項技術的主要作用就是通過 JavaScript 來動態地操作 HTML 文檔和頁面元素。

對于大多數開發者來說，JavaScript DOM 功能是非常重要的一個技能點，因為它可以幫助你實現許多在靜態 HTML 頁面上難以實現的功能。舉個例子，假設你想讓你的網站上的某個按鈕被點擊后會彈出一個提示框，這個時候 JavaScript DOM 功能就可以幫你實現這個功能。

var button = document.querySelector('#my-button');
button.addEventListener('click', function() {
alert('You clicked the button!');
});

在上述代碼中，我們使用了 document.querySelector 方法來查詢網頁中 ID 為 my-button 的元素，然后為這個元素添加了一個點擊事件偵聽器，當用戶點擊這個按鈕時，就會觸發 alert() 方法彈出一個提示框。

除此之外，JavaScript DOM 功能還可以讓你動態地顯示和隱藏頁面元素，例如下面的代碼：

var element = document.querySelector('.my-element');
element.style.display = 'none'; // 隱藏元素

在這個代碼示例中，我們使用了 document.querySelector 方法來查詢網頁中 class 為 my-element 的元素，然后通過設置元素的 style.display 屬性來將這個元素隱藏。這個功能在實際開發中非常有用，因為它允許你通過 JavaScript 來動態地控制頁面元素的可見性。

除此之外，JavaScript DOM 功能還允許你通過修改 HTML 元素的屬性來改變頁面的外觀和行為，例如下面的代碼：

var element = document.querySelector('#my-element');
element.setAttribute('src', 'new-image.png'); // 修改元素的 src 屬性

在這個代碼示例中，我們使用了 document.querySelector 方法來查詢網頁中 ID 為 my-element 的元素，然后通過使用 setAttribute 方法將這個元素的 src 屬性修改為 new-image.png。通過這種方式，你可以輕松地將網頁上的圖片替換成新的圖片，改變頁面的外觀。

總的來說，JavaScript DOM 功能是非常有用的一項技術，因為它可以讓你動態地控制 HTML 文檔和頁面元素，實現許多在靜態 HTML 頁面上難以實現的功能。如果你想成為一名優秀的 Web 開發者，掌握 JavaScript DOM 功能是非常重要的一步。