\n\n\n\n

The DOM for this document might look like this:
\n<\/p>\n\n

Document\n ├── html\n     ├── head\n     │    └── title\n     └── body\n          └── div#content\n               ├── h1\n               └── p\n<\/pre>\n\n\n\n
\n  \n  \n  JavaScript 如何使用 DOM：\n<\/h3>\n\n
\n
\n存取元素<\/strong>：JavaScript 可以使用 document.getElementById() 或 document.querySelector() 等方法從 DOM 中選擇和存取元素。\n<\/li>\n<\/ol>\n\n
   let heading = document.getElementById(\"content\");\n<\/pre>\n\n\n\n
\n
\n操作元素<\/strong>：JavaScript 可以修改元素的內(nèi)容、屬性或樣式。\n<\/li>\n<\/ol>\n\n
   heading.innerHTML = \"New Content\";\n   heading.style.color = \"red\";\n<\/pre>\n\n\n\n
\n
\n事件處理<\/strong>：JavaScript 可以將事件偵聽(tīng)器附加到 DOM 元素，以回應(yīng)使用者操作，例如按一下、按鍵等。\n<\/li>\n<\/ol>\n\n
   document.getElementById(\"myButton\").addEventListener(\"click\", function() {\n     alert(\"Button clicked!\");\n   });\n<\/pre>\n\n\n\n
\n
\n建立和刪除元素<\/strong>：JavaScript 可以動(dòng)態(tài)建立新元素或刪除現(xiàn)有元素。\n<\/li>\n<\/ol>\n\n
   const newElement = document.createElement(\"div\");\n   document.body.appendChild(newElement);\n<\/pre>\n\n\n\n
\n  \n  \n  為什麼 DOM 很重要：\n<\/h3>\n\n<\/pre>\n
\n
它為 JavaScript 提供了一種與網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容互動(dòng)並操作網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容的方法。 <\/li>\n
它允許動(dòng)態(tài)、互動(dòng)式網(wǎng)頁(yè)，無(wú)需重新載入頁(yè)面（例如，更新 UI 或處理使用者輸入）。 <\/li>\n<\/ul>\n\n
\n  \n  \n  DOM 方法：\n<\/h3>\n\n
以下是 JavaScript 中一些常用的 DOM 方法：<\/p>\n
\n
\ngetElementById()：透過(guò) ID 選擇元素。 <\/li>\n
\nquerySelector()：使用 CSS 選擇器選擇第一個(gè)符合元素。 <\/li>\n
\ncreateElement()：建立一個(gè)新的 HTML 元素。 <\/li>\n
\nappendChild()：新增新的子節(jié)點(diǎn)到元素。 <\/li>\n
\nremoveChild()：從元素中移除子節(jié)點(diǎn)。 <\/li>\n
\nsetAttribute()：設(shè)定元素的屬性。 <\/li>\n
\naddEventListener()：將事件處理程序附加到元素。 <\/li>\n<\/ul>\n\n
\n  \n  \n  實(shí)際應(yīng)用範(fàn)例：\n<\/h3>\n\n\n\n
\n\n  \n