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