# 🜚 DOM節點操作方法 ➤取 DOM 元素 --- - [querySelector 選擇器](/tDW3gfiRR6OzIPH1n0AN9g) - [ getElementById選取ID](/ko9Azq2hSkSTFa_yhcygqw) - [querySelectAll和getElementsBy](/tPj-pkYcSH6O6WLZk4aWIw) ➤節點操作 --- - [DOM節點](/ohWjNi1kTC6d_ko4lZyt8A) - [childen、childNodes](/1O7jlgqAQpiWK7N-gO-cgA) - [nextElementSibling、nextSibling](/ZX4DKux9RgSbf2EoH_HuJA) - [parentElement、parentNode](/sdQ2F6UDSWuCT-FZ1za2nQ) ➤新增節點 --- - [createElement](/RHq439BhQOqAm9-Lb8vZxw) - [createTextNode](/zgKFgfu9RnaKe8bsZ9qmww) - [createDocumentFragment](/uvzKNE-GRt-dgTF2E677aA) - [document.write()](/PwgGHZmAT2y0jIaHPg2eyQ) ➤節點的修改與刪除 --- - [appendChild、append](/x6MclvYJT_aq3av938lwog) - [insertBefore、insertAfter](/8eJPNICVSKiWiPWk3vC2Xg) - [replaceChild](/zQ-6zJMdSWyCQFwJIOZ01Q) - [removeChild](/mARusdhDQTu3_m6-7YIGgg) - [insertAdjacentHTML](/rGHSDrJMRiOtgfi38YJO0w) - [insertAdjacentText](/47x9fQYzTRuH-WywQudwSw) ➤元素的內容 --- - [textContent寫入文字資料](/zEq1OOA3QAqgU4_iPqL92A) - [innerHTML](/OseXpBjpRbea-PYWC6WGmA) - [outerHTML](/BgwCK9HjQYuEKhUJ3khl_w) - [innerText、outerText](/XQL-q3b2SsOhqDmar5xZ7A) ➤改變元素的CSS --- - [`classList`、`className`](/pLo70uNVRjWQ1vtcKJoiMA) - [`style`JS動態修改CSS樣式](/sZeUgoAATNiJbsFW7OxDTw) - [styleSheet 樣式表](/iPfB8dKsR5WzD6rYx0wKRQ) ➤屬性操作 --- - [setAttribute](/2iSSMaYsR_2I47bqH23vRw) - [getAttribute](/_BN_Lv8YQ2StCCpc69Y1-g) - [removeAttribute](/nrQx6AZfSFatqlbN2vblnA) - [`style.setProperty`](/uYWOhk-0SVK-m3hzw8C7sw) - [HTML Attributes 與 DOM Properties 的區別](/fn9uLUtUTx-aV9mu7HiEvA) ➤其他 --- - [nodeName](/ClkNCN6WQDms2VuCVwbxnw) - [ckeckbox的操作](/Z6UIkRmHRUqiHeRREoJrbg)
{"metaMigratedAt":"2023-06-16T17:22:06.997Z","metaMigratedFrom":"Content","title":"🜚 DOM節點操作方法","breaks":true,"contributors":"[{\"id\":\"25cff55a-2939-40db-80f3-7ad7c91ba96e\",\"add\":1740,\"del\":178}]"}
Expand menu