\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訪問(wèn)元素<\/strong>：JavaScript 可以使用 document.getElementById() 或 document.querySelector() 等方法從 DOM 中選擇和訪問(wèn)元素。\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創(chuàng)建和刪除元素<\/strong>：JavaScript 可以動(dòng)態(tài)創(chuàng)建新元素或刪除現(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)容交互并操作網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容的方法。<\/li>\n
它允許動(dòng)態(tài)、交互式網(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()：創(chuàng)建一個(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)用示例：\n<\/h3>\n\n\n\n
\n\n  \n