DOM 操作与事件 - 常见问题解答

const element = document.querySelector('.my-class')
console.log(element) // null

<!-- ❌ 错误：脚本在 DOM 之前执行 -->
<head>
  <script>
    const element = document.querySelector('.my-class') // null
  </script>
</head>

<!-- ✅ 正确：等待 DOM 加载 -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.my-class')
    console.log(element) // 找到元素
  })
</script>

<!-- ✅ 或将脚本放在 body 末尾 -->
<body>
  <div class="my-class"></div>
  <script>
    const element = document.querySelector('.my-class') // 找到元素
  </script>
</body>

// ❌ 错误：类名包含特殊字符
const element = document.querySelector('.class.name') // null

// ✅ 正确：转义特殊字符
const element = document.querySelector('.class\\.name')

// ✅ 或使用属性选择器
const element = document.querySelector('[class="class.name"]')

// ❌ 错误：无法直接查询 Shadow DOM
const shadowElement = document.querySelector('.shadow-class') // null

// ✅ 正确：先获取 Shadow Root
const host = document.querySelector('#shadow-host')
const shadowElement = host.shadowRoot.querySelector('.shadow-class')

// getElementsByTagName - 返回动态 HTMLCollection
const divs1 = document.getElementsByTagName('div')
console.log(divs1.length) // 5
document.body.appendChild(document.createElement('div'))
console.log(divs1.length) // 6（自动更新）

// querySelectorAll - 返回静态 NodeList
const divs2 = document.querySelectorAll('div')
console.log(divs2.length) // 6
document.body.appendChild(document.createElement('div'))
console.log(divs2.length) // 6（不变）

<div id="container">
  <div class="level-1">
    <div class="level-2">
      <div class="level-3">
        <span class="target">目标元素</span>
      </div>
    </div>
  </div>
</div>

// ❌ 低效：全局查询
const target = document.querySelector('#container .level-1 .level-2 .level-3 .target')

// ✅ 高效：限定范围查询
const container = document.getElementById('container')
const target = container.querySelector('.target')

// ✅ 更高效：如果可能，直接通过 ID 查询
// <span id="target" class="target">目标元素</span>
const target = document.getElementById('target')

console.time('全局查询')
for (let i = 0; i < 10000; i++) {
  document.querySelector('#container .level-1 .level-2 .level-3 .target')
}
console.timeEnd('全局查询') // ~100ms

console.time('限定范围')
const container = document.getElementById('container')
for (let i = 0; i < 10000; i++) {
  container.querySelector('.target')
}
console.timeEnd('限定范围') // ~50ms

const parent1 = document.getElementById('parent1')
const parent2 = document.getElementById('parent2')
const child = document.getElementById('child')

parent1.appendChild(child) // 从 parent2 移动到 parent1

// ✅ 需要复制节点
const child = document.getElementById('child')
const clone = child.cloneNode(true) // 深拷贝
parent1.appendChild(clone)

// ✅ 或使用 insertAdjacentHTML
const childHTML = child.outerHTML
parent1.insertAdjacentHTML('beforeend', childHTML)

const container = document.getElementById('container')
const button = document.createElement('button')
button.textContent = '点击我'
button.addEventListener('click', () => console.log('点击'))
container.appendChild(button)

// ❌ 事件监听器丢失
container.innerHTML = container.innerHTML + '<p>新内容</p>'

// ✅ 方法1：使用 appendChild
const p = document.createElement('p')
p.textContent = '新内容'
container.appendChild(p)

// ✅ 方法2：使用 insertAdjacentHTML
container.insertAdjacentHTML('beforeend', '<p>新内容</p>')

// ✅ 方法3：使用 DocumentFragment
const fragment = document.createDocumentFragment()
const p = document.createElement('p')
p.textContent = '新内容'
fragment.appendChild(p)
container.appendChild(fragment)

const container = document.getElementById('container')

// 方法1：innerHTML（简单，但可能导致内存泄漏）
container.innerHTML = ''

// 方法2：textContent（最快，推荐用于纯文本节点清空）
container.textContent = ''

// 方法3：循环移除（最安全，避免内存泄漏）
while (container.firstChild) {
  container.removeChild(container.firstChild)
}

// 方法4：replaceChildren（现代方法，推荐）
container.replaceChildren()

// 测试环境：清空 1000 个子节点

console.time('innerHTML')
container.innerHTML = ''
console.timeEnd('innerHTML') // ~5ms

console.time('textContent')
container.textContent = ''
console.timeEnd('textContent') // ~1ms（最快）

console.time('循环移除')
while (container.firstChild) {
  container.removeChild(container.firstChild)
}
console.timeEnd('循环移除') // ~10ms

console.time('replaceChildren')
container.replaceChildren()
console.timeEnd('replaceChildren') // ~3ms

const button = document.getElementById('button')

// 添加监听器
button.addEventListener('click', function() {
  console.log('点击')
})

// ❌ 无法移除：匿名函数无法移除
button.removeEventListener('click', function() {
  console.log('点击')
})

// ✅ 方法1：使用具名函数
function handleClick() {
  console.log('点击')
}
button.addEventListener('click', handleClick)
button.removeEventListener('click', handleClick) // 成功移除

// ✅ 方法2：保存函数引用
const handler = function() {
  console.log('点击')
}
button.addEventListener('click', handler)
button.removeEventListener('click', handler) // 成功移除

// ✅ 方法3：使用 AbortController（推荐）
const controller = new AbortController()
button.addEventListener('click', function() {
  console.log('点击')
}, { signal: controller.signal })

controller.abort() // 自动移除监听器

<div id="outer" onclick="alert('outer')">
  <div id="inner" onclick="alert('inner')">
    <button id="button" onclick="alert('button')">点击</button>
  </div>
</div>

// 方法1：stopPropagation - 阻止冒泡
document.getElementById('button').addEventListener('click', (e) => {
  e.stopPropagation() // 阻止事件向上冒泡
  console.log('button clicked')
})

// 方法2：stopImmediatePropagation - 阻止冒泡并阻止后续监听器
document.getElementById('button').addEventListener('click', (e) => {
  e.stopImmediatePropagation() // 阻止冒泡和后续监听器
  console.log('button clicked')
})

// 方法3：检查 event.target（事件委托常用）
document.getElementById('outer').addEventListener('click', (e) => {
  if (e.target.id === 'button') {
    console.log('button clicked')
  }
})

// ℹ️ 说明：stopPropagation 无法撤回已经执行过的捕获阶段监听器
// （捕获阶段先于目标阶段触发，到达 button 时 document 的捕获监听器已执行）
document.addEventListener('click', () => console.log('document capture'), true)
document.getElementById('button').addEventListener('click', (e) => {
  e.stopPropagation() // 无法阻止 document 的捕获监听器
})

// ✅ 正确：理解事件流
// 捕获阶段：document → outer → inner → button
// 目标阶段：button
// 冒泡阶段：button → inner → outer → document

<ul id="list">
  <li><span>项目1</span></li>
  <li><span>项目2</span></li>
</ul>

// ❌ 错误：点击 span 时 event.target 是 span 而非 li
document.getElementById('list').addEventListener('click', (e) => {
  console.log(e.target.tagName) // 可能是 SPAN
  e.target.classList.add('active') // 错误地添加到 span
})

// ✅ 正确：使用 closest 查找目标元素
document.getElementById('list').addEventListener('click', (e) => {
  const li = e.target.closest('li')
  if (li) {
    li.classList.add('active')
  }
})

// ✅ 或使用 event.currentTarget
document.getElementById('list').addEventListener('click', function(e) {
  console.log(e.currentTarget) // 始终是 ul
  const li = e.target.closest('li')
  if (li) {
    li.classList.add('active')
  }
})

// ❌ 低效：多次重排
const list = document.getElementById('list')
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li')
  li.textContent = `项目 ${i}`
  list.appendChild(li) // 每次都触发重排
}

// ✅ 方案1：使用 DocumentFragment
const fragment = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li')
  li.textContent = `项目 ${i}`
  fragment.appendChild(li)
}
list.appendChild(fragment) // 只触发一次重排

// ✅ 方案2：离线操作
const clone = list.cloneNode(true)
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li')
  li.textContent = `项目 ${i}`
  clone.appendChild(li)
}
list.parentNode.replaceChild(clone, list)

// ✅ 方案3：批量设置样式
const element = document.getElementById('element')
element.style.cssText = `
  width: 100px;
  height: 100px;
  background: red;
`
// 而非多次设置
// element.style.width = '100px'
// element.style.height = '100px'
// element.style.background = 'red'

console.time('直接操作')
for (let i = 0; i < 1000; i++) {
  document.body.appendChild(document.createElement('div'))
}
console.timeEnd('直接操作') // ~200ms

console.time('DocumentFragment')
const fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  fragment.appendChild(document.createElement('div'))
}
document.body.appendChild(fragment)
console.timeEnd('DocumentFragment') // ~20ms

// ❌ 低效：为每个元素添加监听器
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick)
}) // 1000 个元素 = 1000 个监听器

// ✅ 使用事件委托（推荐）
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e)
  }
}) // 只需要 1 个监听器

// ✅ 动态元素自动支持
// 新添加的 .item 元素无需单独添加监听器
const newItem = document.createElement('div')
newItem.className = 'item'
document.getElementById('container').appendChild(newItem)

// 直接监听：1000 个元素
// 内存占用：~100KB（每个监听器 ~100 bytes）

// 事件委托：1 个监听器
// 内存占用：~100 bytes

// ❌ 低效：滚动时频繁计算
window.addEventListener('scroll', () => {
  const element = document.getElementById('element')
  const rect = element.getBoundingClientRect()
  const inViewport = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  )
  console.log(inViewport)
})

// ✅ 使用 Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口')
      // 执行懒加载、动画等
    }
  })
}, {
  threshold: 0.5 // 50% 可见时触发
})

const element = document.getElementById('element')
observer.observe(element)

// 性能优势：
// 1. 浏览器优化，不会频繁触发
// 2. 异步执行，不阻塞主线程
// 3. 自动节流

// IE8- 不支持 addEventListener
// ✅ 使用能力检测
function addEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false)
  } else if (element.attachEvent) {
    element.attachEvent('on' + type, handler)
  } else {
    element['on' + type] = handler
  }
}

// IE8- 不支持 preventDefault
// ✅ 兼容写法
function preventDefault(e) {
  if (e.preventDefault) {
    e.preventDefault()
  } else {
    e.returnValue = false
  }
}

// IE8- 不支持 textContent
// ✅ 使用 innerText 或 nodeValue
function getText(element) {
  return element.textContent || element.innerText || ''
}

// 不同浏览器对同一事件可能有不同默认行为
document.addEventListener('contextmenu', (e) => {
  // 阻止右键菜单
  e.preventDefault()
  
  // 显示自定义菜单
  showCustomMenu(e.clientX, e.clientY)
})

// ✅ 始终检查 cancelable
document.addEventListener('contextmenu', (e) => {
  if (e.cancelable) {
    e.preventDefault()
    showCustomMenu(e.clientX, e.clientY)
  }
})

// ✅ 提供降级方案
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-menu')) {
    hideCustomMenu()
  }
})

// 在 Console 中执行
const observer = new MutationObserver((mutations) => {
  console.table(mutations.map(m => ({
    type: m.type,
    target: m.target.nodeName,
    addedNodes: m.addedNodes.length,
    removedNodes: m.removedNodes.length
  })))
})

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
})

// Chrome DevTools
// Elements 面板 → Event Listeners 标签
// 或在 Console 中：
getEventListeners(element)

// 监控所有点击事件
document.addEventListener('click', (e) => {
  console.log('点击事件:', {
    target: e.target,
    currentTarget: e.currentTarget,
    path: e.composedPath()
  })
}, true) // 捕获阶段

// 方法1：console.time
console.time('DOM 操作')
// ... DOM 操作代码
console.timeEnd('DOM 操作')

// 方法2：performance.now
const start = performance.now()
// ... DOM 操作代码
const end = performance.now()
console.log(`耗时: ${end - start}ms`)

// 方法3：Performance Observer
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.duration)
  })
})
observer.observe({ entryTypes: ['measure'] })

performance.mark('start')
// ... DOM 操作代码
performance.mark('end')
performance.measure('DOM 操作', 'start', 'end')

function debugEventFlow(e) {
  const path = e.composedPath()
  console.group(`${e.type} 事件流`)
  console.log('事件类型:', e.type)
  console.log('目标元素:', e.target)
  console.log('当前阶段:', 
    e.eventPhase === 1 ? '捕获' : 
    e.eventPhase === 2 ? '目标' : '冒泡'
  )
  console.log('事件路径:', path.map(el => 
    el.nodeName || el.constructor.name
  ))
  console.groupEnd()
}

// 在元素上使用
document.getElementById('button').addEventListener('click', debugEventFlow, true) // 捕获
document.getElementById('button').addEventListener('click', debugEventFlow, false) // 冒泡