DOM 操作 ​

const parent = element.parentNode // 父节点
const children = element.childNodes // 所有子节点
const firstChild = element.firstChild // 第一个子节点
const lastChild = element.lastChild // 最后一个子节点
const next = element.nextSibling // 下一个兄弟节点
const prev = element.previousSibling // 上一个兄弟节点

// 获取HTML内容
const htmlContent = element.innerHTML

// 设置HTML内容（会解析HTML标签）
element.innerHTML = '<strong>新内容</strong>'

// 清空元素内容
element.innerHTML = ''

// 追加内容
element.innerHTML += '<span>追加的内容</span>'

// textContent - 获取所有文本内容，包括隐藏元素
const text = element.textContent

// innerText - 只获取可见文本，考虑CSS样式
const visibleText = element.innerText

// 设置文本内容（不会解析HTML）
element.textContent = '纯文本内容'
element.innerText = '可见文本内容'

// 差异示例
;<div id="demo">
  文本内容
  <span style="display:none">隐藏文本</span>
</div>

console.log(demo.textContent) // "文本内容 隐藏文本"
console.log(demo.innerText) // "文本内容"

// 获取属性
const value = element.getAttribute('data-custom')

// 设置属性
element.setAttribute('data-custom', 'new-value')

// 移除属性
element.removeAttribute('data-custom')

// 检查属性是否存在
const hasAttr = element.hasAttribute('data-custom')

// HTML: <div id="user" data-user-id="123" data-user-role="admin">
const userDiv = document.getElementById('user')

// 访问data属性
console.log(userDiv.dataset.userId) // "123"
console.log(userDiv.dataset.userRole) // "admin"

// 设置data属性
userDiv.dataset.userStatus = 'active'

// 直接访问标准属性
element.id = 'newId'
element.className = 'new-class'
element.title = '新标题'
element.src = 'image.jpg'

// 获取class
const classes = element.className

// 设置class（会覆盖原有class）
element.className = 'class1 class2'

// 添加class（不覆盖）
element.className += ' new-class'

// 添加class
element.classList.add('new-class')

// 移除class
element.classList.remove('old-class')

// 切换class
element.classList.toggle('active')

// 检查是否包含class
if (element.classList.contains('active')) {
  // 执行操作
}

// 替换class
element.classList.replace('old-class', 'new-class')

// 设置单个样式
element.style.color = 'red'
element.style.backgroundColor = '#fff'
element.style.fontSize = '16px'

// 批量设置样式
element.style.cssText = 'color: red; background: blue;'

// 获取计算后的样式
const computedStyle = window.getComputedStyle(element)
const color = computedStyle.color

// 创建新元素
const newDiv = document.createElement('div')
const newButton = document.createElement('button')

// 设置属性
newDiv.id = 'new-element'
newDiv.className = 'container'

// 创建文本节点
const textNode = document.createTextNode('这是文本内容')

// 将文本节点添加到元素
newDiv.appendChild(textNode)

// 创建列表项
function createListItem(text) {
  const li = document.createElement('li')
  li.className = 'list-item'
  li.textContent = text
  return li
}

// 使用
const listItem = createListItem('项目内容')

// 添加到父元素的末尾
const parent = document.getElementById('parent')
const newChild = document.createElement('div')
parent.appendChild(newChild)

// 示例：动态创建列表
const ul = document.createElement('ul')
;['项目1', '项目2', '项目3'].forEach((text) => {
  const li = document.createElement('li')
  li.textContent = text
  ul.appendChild(li)
})
document.body.appendChild(ul)

// 在指定节点前插入
const parent = document.getElementById('parent')
const newElement = document.createElement('div')
const referenceElement = document.getElementById('reference')

parent.insertBefore(newElement, referenceElement)

// 如果没有referenceElement，则添加到末尾（等同于appendChild）
parent.insertBefore(newElement, null)

// insertAdjacentHTML - 强大的HTML插入方法
element.insertAdjacentHTML('beforebegin', '<div>在前面插入</div>') // 元素之前
element.insertAdjacentHTML('afterbegin', '<div>在开头插入</div>') // 元素内部开头
element.insertAdjacentHTML('beforeend', '<div>在末尾插入</div>') // 元素内部末尾
element.insertAdjacentHTML('afterend', '<div>在后面插入</div>') // 元素之后

// 删除子节点
const parent = document.getElementById('parent')
const child = document.getElementById('child')

parent.removeChild(child)

// 安全删除（检查是否存在）
if (parent.contains(child)) {
  parent.removeChild(child)
}

// remove() 方法 - 更简洁
const element = document.getElementById('to-remove')
element.remove()

// 批量删除
const elementsToRemove = document.querySelectorAll('.remove-me')
elementsToRemove.forEach((element) => element.remove())

// 方法1: innerHTML
element.innerHTML = ''

// 方法2: 循环删除
while (element.firstChild) {
  element.removeChild(element.firstChild)
}

// 方法3: 现代方式
element.replaceChildren()

// 替换子节点
const parent = document.getElementById('parent')
const oldChild = document.getElementById('old-child')
const newChild = document.createElement('div')

parent.replaceChild(newChild, oldChild)

// 现代替换方法
oldChild.replaceWith(newChild)

// 浅克隆（不克隆子节点）
const original = document.getElementById('original')
const shallowClone = original.cloneNode(false)

// 深克隆（克隆所有子节点）
const deepClone = original.cloneNode(true)

// 使用克隆
deepClone.id = 'cloned-element' // 避免ID重复
parent.appendChild(deepClone)

// 优化示例：使用DocumentFragment
const fragment = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li')
  li.textContent = `项目 ${i}`
  fragment.appendChild(li)
}
document.getElementById('list').appendChild(fragment)