1. DOM 概念
文檔對象模型:將 HTML 文檔映射為樹形結構,JS 可通過 DOM 操作頁面。
2. 獲取元素
document.getElementById('id')
document.querySelector('CSS選擇器')
document.querySelectorAll() 獲取多個
3. 操作元素
屬性操作:
element.getAttribute('屬性')
element.setAttribute('屬性', '值')
樣式操作:
element.style.樣式名 = 值
element.classList.add/remove/toggle()
內容操作:
element.innerHTML
element.textContent
4. 創建與刪除節點
document.createElement('標簽名')
element.appendChild(child)
element.removeChild(child)
parent.replaceChild(new, old)
5. 事件處理
element.addEventListener('事件類型', 函數)
常用事件:click, mouseover, keydown, submit
6. 節點關系
parentNode, childNodes, firstChild, lastChild
nextSibling, previousSibling