17370845950

JavaScript 操作 DOM 的核心是通过内置 API 查找、读取和修改元素的内容、属性或样式；常用方法包括 getElementById() 和 querySelector() 查找元素，textContent 与 innerHTML 修改内容，style 与 classList 控制样式，createElement/append/remove 动态操作节点，并需确保在 DOM 加载完成后执行。

JavaScript 操作 DOM 的核心，就是通过内置 API 找到页面元素，再读取、修改它的内容、属性或样式。不需要框架，原生方法足够灵活实用。

找到目标元素：用对选择器方法

最常用的是 document.getElementById()（精准找唯一 ID）和 document.querySelector()（支持 CSS 选择器，更通用）。比如：

• document.getElementById('header') → 找到
• document.querySelector('.btn.active') → 找第一个同时有 btn 和 active 类的元素
• document.querySelectorAll('li') → 返回所有
• 元素的静态 NodeList，可遍历操作

改内容：textContent 和 innerHTML 各有分工

textContent 只处理纯文本，安全、快，适合显示用户输入或防止 XSS；innerHTML 解析 HTML 字符串，能插入标签，但要确保内容可信。

• 改文字：el.textContent = '新标题'
• 插带样式的结构：el.innerHTML = '加粗和斜体'
• 清空内容：el.innerHTML = '' 或 el.textContent = ''

改样式：style 和 classList 是主力

直接改内联样式用 element.style.xxx（注意驼峰命名，如 backgroundColor），但更适合临时状态；批量控制外观推荐 classList 操作 CSS 类——更清晰、易维护。

• 加类：el.classList.add('highlight', 'animated')
• 删类：el.classList.remove('disabled')
• 切换开关：el.classList.toggle('hidden')
• 设为唯一类（先清再加）：el.className = 'btn btn-primary'（少用，会覆盖全部）
• 内联样式示例：el.style.color = '#333'; el.style.opacity = '0.8';

动态增删元素：create、append、remove 三步走

新增节点分三步：创建 → 设置内容/属性 → 插入；删除直接调用 remove()。

• 创建并插入：const p = document.createElement('p'); p.textContent = '这是新段落'; document.body.append(p);
• 插入到开头：el.prepend(newEl)；插入到某元素前：parent.insertBefore(newEl, refEl)
• 删除自身：el.remove()；清空子元素：el.innerHTML = '' 或 while(el.firstChild) el.removeChild(el.firstChild)

不复杂但容易忽略：所有 DOM 操作都应在元素加载完成后执行，通常放在 DOMContentLoaded 事件里，或把 script 放在 body 底部。