DOM 操作与事件
所有 JS 特效的起点都是 DOM 操作：querySelector 拿元素、addEventListener 绑事件、classList/style 改外观。特效90% 的代码就是这三件套的组合。
原则：能用 class 切换就不直接改 style——class 可复用、可维护，且能与 CSS 过渡天然配合；直接改 style 只用于动态计算的值（如轮播位移 translateX）。
- querySelector / querySelectorAll：按选择器拿元素
- addEventListener("click", fn)：绑定事件；可解绑
- classList.add/remove/toggle：类切换是特效主力
HTML
<style> #card { width: 200px; padding: 16px; margin: 24px auto; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.1); transition: all .3s ease; cursor: pointer; } #card.active { background: #d2a8ff; color: #fff; transform: scale(1.05); } </style> <div id="card">点击我切换 active 类</div> <script> var card = document.getElementById('card'); var count = 0; card.addEventListener('click', function () { card.classList.toggle('active'); // 切换类 count++; card.querySelector ? null : null; card.textContent = (card.classList.contains('active') ? '已激活 ' : '未激活 ') + count + ' 次切换'; }); </script>
本节要点DOM 三件套：querySelector、addEventListener、classList；优先切类而非改 style。
