DOM是HTML的树状模型，JavaScript通过它动态操作网页内容与交互；常用querySelector等方法获取元素，修改其内容、属性和样式，并通过addEventListener绑定事件实现响应行为，如按钮点击添加段落或监听输入变化，掌握这些核心操作即可构建常见前端功能。
JavaScript DOM 操作是前端开发的核心技能之一。通过 DOM（Document Object Model），开发者可以动态地读取、修改网页内容、结构和样式。掌握 DOM 操作，能让你的网页实现交互功能，比如响应按钮点击、动态添加内容、验证表单等。
什么是 DOM？
DOM 是浏览器将 HTML 文档解析后生成的一个树状结构模型，每个 HTML 元素都对应一个节点。JavaScript 可以通过这个模型访问和操作页面元素。
例如，HTML 中的 <div>、<p>、<button> 都可以在 JavaScript 中被选中并控制。
获取 DOM 元素的方法
在操作元素前，首先要“找到”它们。常用的选择方法包括：
立即学习“Java免费学习笔记（深入）”；
- document.getElementById('id')：通过 ID 获取单个元素
- document.getElementsByClassName('class')：通过类名获取元素集合（返回 HTMLCollection）
- document.getElementsByTagName('div')：通过标签名获取元素集合
- document.querySelector('selector')：使用 CSS 选择器获取第一个匹配的元素
- document.querySelectorAll('selector')：获取所有匹配的元素（返回 NodeList）
推荐使用 querySelector 和 querySelectorAll，语法灵活，支持复杂选择器。
修改元素内容与属性
选中元素后，就可以修改其内容或行为：
- element.innerHTML = '新内容'：设置元素内的 HTML 内容
- element.textContent = '文本'：仅设置纯文本，更安全
- element.setAttribute('src', '图片路径')：设置属性
- element.getAttribute('href')：获取属性值
- element.style.color = 'red'：直接修改样式
注意：innerHTML 可能带来 XSS 风险，若只更新文本，优先使用 textContent。
添加与删除元素
动态创建和移除元素是构建交互界面的关键：
- document.createElement('div')：创建新元素
- parent.appendChild(child)：将子元素添加到父元素末尾
- parent.insertBefore(new, existing)：在指定元素前插入
- element.remove()：删除元素自身
示例：点击按钮添加一个段落
const container = document.getElementById('container');
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const p = document.createElement('p');
p.textContent = '这是新添加的段落';
container.appendChild(p);
});
事件处理
让网页对用户操作做出反应，需要绑定事件监听器：
- element.addEventListener('click', function)：监听点击事件
- 常见事件：'click'、'input'、'submit'、'mouseover' 等
- 避免使用 onclick 属性，推荐 addEventListener
示例：监听输入框内容变化
const input = document.querySelector('input');
input.addEventListener('input', (e) => {
console.log('当前输入：', e.target.value);
});
基本上就这些。熟练运用 DOM 查询、修改、创建和事件绑定，就能实现大多数前端交互逻辑。多练习常见场景，如轮播图、待办事项列表、动态表单等，会更快掌握。不复杂但容易忽略细节，比如节点类型、事件冒泡，后续可深入学习。
