Document 节点详解

console.log(document instanceof Document) // true
console.log(document.nodeType) // 9
console.log(document.documentElement.tagName) // "HTML"

// iframe 中的文档
const iframe = document.querySelector('iframe')
const iframeDoc = iframe?.contentDocument

// 解析 XML/HTML
const parser = new DOMParser()
const xmlDoc = parser.parseFromString('<root></root>', 'text/xml')

// 节点所属文档
const div = document.querySelector('div')
console.log(div.ownerDocument === document) // true

// 创建独立文档
const newDoc = document.implementation.createHTMLDocument('Test')
console.log(newDoc.title) // "Test"

// 访问根元素
console.log(document.documentElement.tagName) // "HTML"

// 滚动到顶部
const scrollEl = document.scrollingElement || document.documentElement
scrollEl.scrollTop = 0

// 检查全屏状态
if (document.fullscreenElement?.nodeName === 'VIDEO') {
  console.log('视频正在全屏播放')
}

// 获取焦点元素
const focused = document.activeElement
if (focused instanceof HTMLInputElement) {
  console.log('当前输入框:', focused.value)
}

// 遍历所有链接
for (let i = 0; i < document.links.length; i++) {
  console.log(document.links[i].href)
}

// 通过 name 访问表单
const loginForm = document.forms.login // <form name="login">
const firstForm = document.forms[0]    // 第一个表单

// 检查页面脚本
if (document.scripts.length === 0) {
  console.log('页面不包含脚本')
}

// 动态集合的特性
const images = document.images
console.log(images.length) // 3
document.body.appendChild(document.createElement('img'))
console.log(images.length) // 4（自动更新）

// 获取静态快照
const imagesArray = Array.from(document.images)
const formIds = [...document.forms].map(form => form.id)

// URL 信息
console.log(document.URL)      // "https://example.com/path?query=1"
console.log(document.baseURI)  // "https://example.com/base/"

// 重定向
document.location = 'https://new.url' // 跳转

// baseURI 受 <base> 标签影响
// <base href="https://cdn.example.com/">
console.log(document.baseURI) // "https://cdn.example.com/"

// 设置标题
document.title = '新标题'

// 检测文档模式
if (document.compatMode === 'CSS1Compat') {
  console.log('标准模式')
} else {
  console.log('怪异模式')
}

// 检测来源
if (document.referrer) {
  console.log('来源:', document.referrer)
} else {
  console.log('直接访问')
}

// 检测编码
console.log(document.characterSet) // "UTF-8"
console.log(document.charset)      // 已废弃，使用 characterSet

// 监听可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面隐藏，暂停动画和视频')
    video.pause()
  } else {
    console.log('页面可见，恢复播放')
    video.play()
  }
})

// 检测加载状态
console.log(document.readyState) // "loading" | "interactive" | "complete"

// 监听加载状态变化
document.addEventListener('readystatechange', () => {
  if (document.readyState === 'complete') {
    console.log('页面完全加载')
  }
})

// 开启全局编辑
document.designMode = 'on'

// 设置 Cookie
document.cookie = [
  'username=John',
  'expires=Fri, 31 Dec 2025 23:59:59 GMT',
  'path=/',
  'SameSite=Lax',
  'Secure'
].join('; ')

// 获取当前脚本
const script = document.currentScript
console.log(script?.src) // 当前脚本路径

// 进入全屏
if (!document.fullscreenElement && document.fullscreenEnabled) {
  await document.documentElement.requestFullscreen()
}

// 退出全屏
if (document.fullscreenElement) {
  await document.exitFullscreen()
}

// 画中画
if (document.pictureInPictureEnabled) {
  const video = document.querySelector('video')
  if (video && !document.pictureInPictureElement) {
    await video.requestPictureInPicture()
  }
}

// 禁用特定样式表
for (const sheet of document.styleSheets) {
  if (sheet.href?.includes('legacy')) {
    sheet.disabled = true
  }
}

// 使用构造样式表
if ('adoptedStyleSheets' in document) {
  const sheet = new CSSStyleSheet()
  await sheet.replace(`
    :root {
      color-scheme: light dark;
    }
  `)
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
}

// 等待字体加载
await document.fonts.ready
console.log('所有字体已加载')

const element = document.getElementById(id)

const app = document.getElementById('app')
const header = document.getElementById('header')

// 性能优于 querySelector('#id')
console.time('getElementById')
for (let i = 0; i < 10000; i++) {
  document.getElementById('test')
}
console.timeEnd('getElementById')

console.time('querySelector')
for (let i = 0; i < 10000; i++) {
  document.querySelector('#test')
}
console.timeEnd('querySelector')

const element = document.querySelector(selector)
const elements = document.querySelectorAll(selector)

// 限定作用域
const container = document.getElementById('container')
const items = container.querySelectorAll('.item')

// 基本查询
const headline = document.querySelector('#header')
const activeButtons = document.querySelectorAll('.btn.is-active')

// 限定作用域（提升性能）
const sidebar = document.getElementById('sidebar')
const links = sidebar.querySelectorAll('a[href^="#"]')

// 选择器分组
const boxes = document.querySelectorAll('div.note, div.alert')

// 属性选择器
const inputs = document.querySelectorAll('input[type="text"][required]')

// 伪类选择器
const firstItem = document.querySelector('li:first-child')
const checkedInputs = document.querySelectorAll('input:checked')

// 特殊字符转义
const id = 'user.name'
const element = document.querySelector(`#${CSS.escape(id)}`)

// 性能优化：缓存查询结果
const cachedElements = document.querySelectorAll('.item')
// 避免在循环中重复查询

const elements = document.getElementsByTagName(tagName)
const elements = element.getElementsByTagName(tagName) // 限定作用域

const images = document.getElementsByTagName('img')
console.log(images.length) // 初始数量

document.body.appendChild(document.createElement('img'))
console.log(images.length) // 自动 +1

// SVG 命名空间
const svg = document.querySelector('svg')
const circles = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'circle')

// 错误：正序遍历时删除会跳过元素
const items = document.getElementsByTagName('li')
for (let i = 0; i < items.length; i++) {
  items[i].remove() // 危险！
}

// 正确：倒序删除
for (let i = items.length - 1; i >= 0; i--) {
  items[i].remove()
}

// 正确：先拷贝为数组
const itemsArray = Array.from(document.getElementsByTagName('li'))
itemsArray.forEach(item => item.remove())

const elements = document.getElementsByClassName(classNames)
const elements = element.getElementsByClassName(classNames)

// 单类名
const buttons = document.getElementsByClassName('btn')

// 多类名组合（AND 关系）
const activeButtons = document.getElementsByClassName('btn primary')

// 限定作用域
const sidebar = document.getElementById('sidebar')
const links = sidebar.getElementsByClassName('nav-link')

// 动态特性
const items = document.getElementsByClassName('item')
console.log(items.length) // 3
const newItem = document.createElement('div')
newItem.className = 'item'
document.body.appendChild(newItem)
console.log(items.length) // 4

const elements = document.getElementsByName(name)

// 单选按钮组
const genderRadios = document.getElementsByName('gender')

// meta 标签
const viewport = document.getElementsByName('viewport')[0]

// 表单控件
const emails = document.getElementsByName('email')

// 转换为数组使用数组方法
const emailArray = [...document.getElementsByName('email')]

const element = document.elementFromPoint(x, y)
const elements = document.elementsFromPoint(x, y)

// 鼠标悬停检测
document.addEventListener('mousemove', (event) => {
  const topElement = document.elementFromPoint(event.clientX, event.clientY)
  console.log('鼠标下的元素:', topElement?.tagName)
})

// 点击穿透分析
document.addEventListener('click', (event) => {
  const stack = document.elementsFromPoint(event.clientX, event.clientY)
  console.log('命中路径:', stack.map(el => el.tagName))
})

// 拖放目标检测
function getDropTarget(x, y) {
  const element = document.elementFromPoint(x, y)
  return element?.closest('.drop-zone')
}

const element = document.createElement(tagName, options?)

// 基本创建
const div = document.createElement('div')
div.className = 'container'
div.textContent = 'Hello'

// 创建自定义元素
class MyButton extends HTMLElement {}
customElements.define('my-button', MyButton)
const btn = document.createElement('button', { is: 'my-button' })

// SVG 元素需要命名空间
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')

const textNode = document.createTextNode(data)

// 安全插入用户输入（防 XSS）
const userInput = "<script>alert('XSS')</script>"
const textNode = document.createTextNode(userInput)

const container = document.createElement('div')
container.appendChild(textNode)
document.body.appendChild(container)
// 显示：<script>alert('XSS')</script>（纯文本）

// 对比 innerHTML（危险！）
container.innerHTML = userInput // 会执行脚本！

const attr = document.createAttribute(name)
attr.value = value
element.setAttributeNode(attr)

// 传统方式（不推荐）
const attr = document.createAttribute('data-role')
attr.value = 'dialog'
element.setAttributeNode(attr)

// 现代方式（推荐）
element.setAttribute('data-role', 'dialog')
// 或
element.dataset.role = 'dialog'

const comment = document.createComment(data)

// 标记动态内容边界
const begin = document.createComment(' 用户卡片开始 ')
const end = document.createComment(' 用户卡片结束 ')

const card = document.createElement('section')
card.className = 'user-card'

const fragment = document.createDocumentFragment()
fragment.appendChild(begin)
fragment.appendChild(card)
fragment.appendChild(end)

document.body.appendChild(fragment)

const fragment = document.createDocumentFragment()

// 批量插入列表项（减少回流）
function renderList(items) {
  const fragment = document.createDocumentFragment()
  
  items.forEach(item => {
    const li = document.createElement('li')
    li.textContent = item
    fragment.appendChild(li)
  })
  
  const list = document.getElementById('list')
  list.innerHTML = ''
  list.appendChild(fragment) // 一次性插入
}

// 对比：逐个插入（多次回流）
function renderListSlow(items) {
  const list = document.getElementById('list')
  list.innerHTML = ''
  items.forEach(item => {
    const li = document.createElement('li')
    li.textContent = item
    list.appendChild(li) // 每次都触发回流
  })
}

// 移动节点（从原文档移除）
const node = document.adoptNode(externalNode)

// 复制节点（保留原文档）
const node = document.importNode(externalNode, deep)

// 从 iframe 移动节点
const iframe = document.querySelector('iframe')
const externalDoc = iframe.contentDocument
const externalNode = externalDoc.getElementById('content')

// adoptNode：从原文档移除
const adopted = document.adoptNode(externalNode)
document.body.appendChild(adopted)

// importNode：保留原文档
const imported = document.importNode(externalNode, true)
document.body.appendChild(imported)

// 从 DOMParser 结果导入
const parser = new DOMParser()
const doc = parser.parseFromString('<div>内容</div>', 'text/html')
const importedNode = document.importNode(doc.body.firstElementChild, true)
document.body.appendChild(importedNode)

const iterator = document.createNodeIterator(
  root,
  whatToShow,
  filterFn
)

// 遍历所有元素
const iterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_ELEMENT
)

let node
while ((node = iterator.nextNode())) {
  console.log(node.tagName)
}

// 只遍历文本节点
const textIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_TEXT
)

// 自定义过滤
const linkIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  {
    acceptNode(node) {
      return node.tagName === 'A' && node.href
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP
    }
  }
)

const walker = document.createTreeWalker(
  root,
  whatToShow,
  filterFn
)

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT
)

// 遍历所有元素
const elements = []
while (walker.nextNode()) {
  elements.push(walker.currentNode)
}

// 树形导航
walker.firstChild()    // 第一个子节点
walker.lastChild()     // 最后一个子节点
walker.nextSibling()   // 下一个兄弟
walker.previousSibling() // 上一个兄弟
walker.parentNode()    // 父节点

// 当前节点
console.log(walker.currentNode)

target.addEventListener(type, listener, options?)
target.removeEventListener(type, listener, options?)

{
  capture: false,    // 捕获阶段触发
  once: false,       // 仅触发一次
  passive: false,    // 不会调用 preventDefault()
  signal: undefined  // AbortSignal 用于移除
}

// 基本用法
document.addEventListener('click', (event) => {
  console.log('点击:', event.target)
})

// 一次性监听
element.addEventListener('transitionend', handler, { once: true })

// 被动监听器（优化滚动性能）
document.addEventListener('touchstart', handler, { passive: true })

// 使用 AbortController 批量移除
const controller = new AbortController()
const { signal } = controller

document.addEventListener('click', handler1, { signal })
document.addEventListener('keydown', handler2, { signal })

// 一次性移除所有
controller.abort()

// 使用对象作为监听器
const handler = {
  handleEvent(event) {
    console.log(event.type)
  }
}
element.addEventListener('click', handler)

// 错误：无法移除
element.addEventListener('click', () => {})
element.removeEventListener('click', () => {}) // 不同的函数引用

// 正确：使用具名函数
function handler(event) {}
element.addEventListener('click', handler)
element.removeEventListener('click', handler)

const success = target.dispatchEvent(event)

// 触发自定义事件
const event = new CustomEvent('build', {
  detail: { time: Date.now() },
  bubbles: true,
  cancelable: true
})

element.addEventListener('build', (e) => {
  console.log('构建时间:', e.detail.time)
})

element.dispatchEvent(event)

// 触发原生事件
const button = document.querySelector('button')
const clickEvent = new MouseEvent('click', { bubbles: true })
const notCancelled = button.dispatchEvent(clickEvent)

console.log('事件是否被取消:', !notCancelled)

// 旧方式（不推荐）
const event = document.createEvent('Event')
event.initEvent('build', true, true)
element.dispatchEvent(event)

// 新方式（推荐）
const event = new Event('build', { bubbles: true, cancelable: true })
// 或
const event = new CustomEvent('build', { detail: { ... } })

const focused = document.hasFocus()

// 根据焦点状态调整行为
function startAnimation() {
  if (document.hasFocus()) {
    // 页面聚焦时运行动画
    requestAnimationFrame(animate)
  }
}

// 监听焦点变化
window.addEventListener('focus', () => {
  console.log('页面获得焦点')
})

window.addEventListener('blur', () => {
  console.log('页面失去焦点')
})

const success = document.execCommand(commandId, showUI?, value?)

// 旧方式（不推荐）
document.execCommand('bold')
document.execCommand('copy')

// 新方式：Clipboard API
navigator.clipboard.writeText(text)
navigator.clipboard.readText()

// 新方式：Selection/Range
const selection = window.getSelection()
const range = selection.getRangeAt(0)
// 手动操作选区

const selection = document.getSelection()
// 等同于 window.getSelection()

// 获取选中文本
const selection = document.getSelection()
const selectedText = selection.toString()

console.log('选中的文本:', selectedText)

// 获取选区范围
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0)
  console.log('选区起始:', range.startContainer)
  console.log('选区结束:', range.endContainer)
}

// 清除选区
selection.removeAllRanges()

// 程序化设置选区
const range = document.createRange()
range.selectNodeContents(element)
selection.removeAllRanges()
selection.addRange(range)

// 危险示例
document.write('<p>内容</p>') // 阻塞解析

setTimeout(() => {
  document.write('<p>清空页面</p>') // 清空整个文档！
}, 1000)

// 动态插入内容
const element = document.createElement('p')
element.textContent = '内容'
document.body.appendChild(element)

// 使用 innerHTML（注意 XSS）
container.innerHTML = '<p>内容</p>'

// 使用模板
const template = document.createElement('template')
template.innerHTML = '<p>内容</p>'
document.body.appendChild(template.content)

// DOM 解析完成
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 已就绪，可以操作元素')
  initApp()
})

// 所有资源加载完成
window.addEventListener('load', () => {
  console.log('所有资源加载完成')
  // 依赖图片尺寸的逻辑
  measureImages()
})

// 更早的初始化方式
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init)
} else {
  init() // DOM 已就绪
}

// 监听可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面隐藏')
    pauseVideo()
    stopAnimation()
  } else {
    console.log('页面可见')
    resumeVideo()
    startAnimation()
  }
})

// 滚动事件
document.addEventListener('scroll', () => {
  console.log('滚动位置:', document.scrollingElement.scrollTop)
}, { passive: true })

// 点击事件委托
document.addEventListener('click', (event) => {
  const target = event.target.closest('[data-action]')
  if (!target) return

  const action = target.dataset.action
  switch (action) {
    case 'fullscreen':
      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        document.documentElement.requestFullscreen()
      }
      break
    case 'scroll-top':
      document.scrollingElement.scrollTop = 0
      break
    default:
      console.log('未定义的操作:', action)
  }
})

function renderUserInput(input) {
  const p = document.createElement('p')
  p.textContent = input // 自动转义 HTML
  document.getElementById('output')?.appendChild(p)
}

// 安全：XSS 攻击失效
renderUserInput("<img onerror='alert(1)' src=x>")
// 显示：<img onerror='alert(1)' src=x>（纯文本）

function renderList(containerId, data) {
  const container = document.getElementById(containerId)
  if (!container) return
  
  // 使用文档片段减少回流
  const fragment = document.createDocumentFragment()
  
  data.forEach(text => {
    const li = document.createElement('li')
    li.textContent = text
    fragment.appendChild(li)
  })
  
  container.innerHTML = ''
  container.appendChild(fragment)
}

renderList('list', ['项目 1', '项目 2', '项目 3'])

<template id="card-tpl">
  <article class="card">
    <h3></h3>
    <p></p>
    <button data-action="remove">删除</button>
  </article>
</template>

<div id="cards"></div>

function addCard(title, content) {
  const tpl = document.getElementById('card-tpl')
  if (!(tpl instanceof HTMLTemplateElement)) return
  
  const node = tpl.content.firstElementChild.cloneNode(true)
  node.querySelector('h3').textContent = title
  node.querySelector('p').textContent = content
  
  document.getElementById('cards')?.appendChild(node)
}

// 事件委托
document.getElementById('cards')?.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]')
  if (!btn) return
  
  const action = btn.dataset.action
  if (action === 'remove') {
    const card = btn.closest('.card')
    card?.remove()
  }
})

// 使用
addCard('标题 1', '内容 1')
addCard('标题 2', '内容 2')

function scrollToTop() {
  const el = document.scrollingElement || document.documentElement
  el.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 监听滚动显示回到顶部按钮
let scrollToTopBtn
document.addEventListener('scroll', () => {
  if (!scrollToTopBtn) {
    scrollToTopBtn = document.getElementById('scroll-to-top')
  }
  
  if (document.scrollingElement.scrollTop > 300) {
    scrollToTopBtn?.classList.add('visible')
  } else {
    scrollToTopBtn?.classList.remove('visible')
  }
}, { passive: true })

// 读取 Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`
  const parts = value.split(`; ${name}=`)
  if (parts.length === 2) {
    return parts.pop().split(';').shift()
  }
  return null
}

// 设置 Cookie
function setCookie(name, value, days) {
  const date = new Date()
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/; SameSite=Lax; Secure`
}

// 删除 Cookie
function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
}

// 使用
setCookie('user', 'john', 7)
console.log(getCookie('user')) // 'john'
deleteCookie('user')

// 是否在 iframe 中
const isInIframe = () => window.self !== window.top

// 是否在顶层窗口
const isTopWindow = () => window.self === window.top

// 获取当前脚本路径
function getCurrentScriptPath() {
  const script = document.currentScript
  if (!script) return ''
  
  const src = script.src || ''
  return src.substring(0, src.lastIndexOf('/') + 1)
}

// 检测移动端
const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

// 封装 DOM 就绪检测
function domReady(callback) {
  if (document.readyState !== 'loading') {
    callback()
  } else {
    document.addEventListener('DOMContentLoaded', callback)
  }
}

// 使用
domReady(() => {
  console.log('DOM 已就绪')
  initApp()
})

// 现代方式（推荐）
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text)
    console.log('复制成功')
  } catch (err) {
    console.error('复制失败:', err)
  }
}

// 兼容方式：navigator.clipboard 需要安全上下文，旧浏览器可回退
function copyTextFallback(text) {
  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.style.position = 'fixed'
  textarea.style.opacity = '0'
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand('copy')
  document.body.removeChild(textarea)
}

// 调用：优先使用现代 API，否则回退
function copyToClipboard(text) {
  if (navigator.clipboard) {
    copyText(text)
  } else {
    copyTextFallback(text)
  }
}

// 错误：重复查询
for (let i = 0; i < 100; i++) {
  document.getElementById('container').appendChild(createElement(i))
}

// 正确：缓存查询结果
const container = document.getElementById('container')
const fragment = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
  fragment.appendChild(createElement(i))
}
container.appendChild(fragment)

// 错误：逐个插入（多次回流）
items.forEach(item => {
  list.appendChild(document.createElement('li'))
})

// 正确：使用文档片段
const fragment = document.createDocumentFragment()
items.forEach(item => {
  const li = document.createElement('li')
  li.textContent = item
  fragment.appendChild(li)
})
list.appendChild(fragment) // 一次回流

// 错误：每个按钮单独绑定
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick)
})

// 正确：事件委托
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    handleClick(e)
  }
})

// 复杂操作前脱离文档流
const element = document.getElementById('container')
const parent = element.parentNode
const nextSibling = element.nextSibling

// 脱离文档流
parent.removeChild(element)

// 执行复杂操作
element.style.width = '100px'
element.style.height = '100px'
// ...更多操作

// 重新插入
parent.insertBefore(element, nextSibling)

// 样式读取和写入分离
function updateLayout() {
  // 读取
  const height = element.offsetHeight
  
  // 写入
  requestAnimationFrame(() => {
    element.style.height = height + 10 + 'px'
  })
}

// HTMLCollection 是动态的
const images = document.getElementsByTagName('img')
console.log(images.length) // 3
document.body.appendChild(new Image())
console.log(images.length) // 4（自动更新）

// NodeList 可能是静态或动态
const allImages = document.querySelectorAll('img') // 静态
const namedImages = document.getElementsByName('img') // 静态

// 兼容性检测
if ('adoptedStyleSheets' in document) {
  // 使用构造样式表
} else {
  // 回退到 <style> 元素
}

// 滚动元素兼容
const scrollElement = document.scrollingElement || document.documentElement

// 方案 1：使用 DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('my-element')
})

// 方案 2：使用 defer 属性
// <script src="app.js" defer></script>

// 方案 3：放置在 body 末尾
// <script src="app.js"></script> </body>

// 方案 4：检测加载状态
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init)
} else {
  init()
}

// 错误示例
const items = document.getElementsByClassName('item')
for (let i = 0; i < items.length; i++) {
  items[i].remove() // 会跳过元素
}

// 方案 1：倒序遍历
for (let i = items.length - 1; i >= 0; i--) {
  items[i].remove()
}

// 方案 2：转换为静态数组
const itemsArray = Array.from(document.getElementsByClassName('item'))
itemsArray.forEach(item => item.remove())

// 方案 3：使用 querySelectorAll
const items = document.querySelectorAll('.item') // 静态 NodeList
items.forEach(item => item.remove())

// 方案 1：等待 load 事件
window.addEventListener('load', () => {
  const height = element.offsetHeight
})

// 方案 2：使用 requestAnimationFrame
requestAnimationFrame(() => {
  const height = element.offsetHeight
})

// 方案 3：触发强制回流
element.offsetHeight // 读取触发回流
const computed = getComputedStyle(element)

// 方案 4：使用 ResizeObserver
const observer = new ResizeObserver((entries) => {
  console.log('尺寸:', entries[0].contentRect)
})
observer.observe(element)

<!-- 设置 CORS -->
<link rel="stylesheet" href="https://other-domain.com/style.css" crossorigin="anonymous">

// 安全访问
try {
  const rules = styleSheet.cssRules
  // 处理规则
} catch (e) {
  console.warn('无法访问跨域样式表')
}

// 错误：匿名函数无法移除
element.addEventListener('click', () => {})
element.removeEventListener('click', () => {}) // 无效！

// 正确：使用具名函数
function handleClick(event) {}
element.addEventListener('click', handleClick)
element.removeEventListener('click', handleClick) // 有效

// 正确：使用对象监听器
const handler = {
  handleEvent(event) {
    console.log(event.type)
  }
}
element.addEventListener('click', handler)
element.removeEventListener('click', handler)

// 正确：使用 AbortController
const controller = new AbortController()
element.addEventListener('click', handler, { signal: controller.signal })
controller.abort() // 移除

// 完全避免使用 document.write

// 替代方案：动态插入
const script = document.createElement('script')
script.src = 'script.js'
document.body.appendChild(script)

// 替代方案：使用 innerHTML
element.innerHTML = '<p>内容</p>'

// 替代方案：使用 DOM API
const p = document.createElement('p')
p.textContent = '内容'
element.appendChild(p)