JavaScriptDOM操作指南_javascript前端开发

获取 DOM 元素的方法

在操作元素前，首先要“找到”它们。常用的选择方法包括：

立即学习“Java免费学习笔记（深入）”；

• document.getElementById('id')：通过 ID 获取单个元素
• document.getElementsByClassName('class')：通过类名获取元素集合（返回 HTMLCollection）
• document.getElementsByTagName('div')：通过标签名获取元素集合
• document.querySelector('selector')：使用 CSS 选择器获取第一个匹配的元素
• document.querySelectorAll('selector')：获取所有匹配的元素（返回 NodeList）

推荐使用 querySelector 和 querySelectorAll，语法灵活，支持复杂选择器。

修改元素内容与属性

选中元素后，就可以修改其内容或行为：

Kacha

KaCha是一款革命性的AI写真工具，用AI技术将照片变成杰作！

下载

• 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 查询、修改、创建和事件绑定，就能实现大多数前端交互逻辑。多练习常见场景，如轮播图、待办事项列表、动态表单等，会更快掌握。不复杂但容易忽略细节，比如节点类型、事件冒泡，后续可深入学习。