JS中的DOM是什么？如何操作？

DOM（Document Object Model，文档对象模型）是 JavaScript 操作网页内容的核心机制，它将 HTML 文档转化为树状结构（DOM 树），使 JavaScript 能够访问、修改页面元素，实现动态更新。以下是具体操作方法及注意事项：

操作元素前需先获取其引用，常用方法包括：

• document.getElementById('id')：通过唯一 ID 获取元素，返回单个节点。const btn = document.getElementById('myBtn');
• document.querySelector('选择器')：支持 CSS 选择器，返回第一个匹配的元素。const btn = document.querySelector('#myBtn'); // 等效于 getElementById
• document.querySelectorAll('选择器')：返回所有匹配元素的集合（NodeList）。const items = document.querySelectorAll('.item');
• document.getElementsByClassName('class名')：返回类数组的 HTMLCollection。const list = document.getElementsByClassName('list');
• document.getElementsByTagName('标签名')：通过标签名获取集合。const divs = document.getElementsByTagName('div');

获取元素后，可修改其内容、样式或属性：

• 修改文本内容：

  textContent：直接设置文本，忽略 HTML 标签。const para = document.querySelector('p');para.textContent = '新文本';

  innerText（不推荐）：受 CSS 样式影响，可能不返回隐藏文本。

• 修改 HTML 内容：

  innerHTML：可插入 HTML 字符串，但需防范 XSS 攻击。const container = document.querySelector('.container');container.innerHTML = '<strong>加粗文本</strong>';

• 修改样式：

  直接设置 style 属性：para.style.color = 'red';para.style.fontSize = '20px';

  推荐：通过 classList 操作类名：para.classList.add('highlight'); // 添加类para.classList.remove('highlight'); // 移除类para.classList.toggle('active'); // 切换类

• 修改属性：

  setAttribute() / getAttribute()：const link = document.querySelector('a');link.setAttribute('href', '

  https://example.com'
  );const href = link.getAttribute('href');

动态增减元素需先创建节点，再插入或移除：

• 创建并添加元素：const newPara = document.createElement('p');newPara.textContent = '新段落';document.body.appendChild(newPara); // 添加到 body 末尾// 或插入到指定位置const parent = document.querySelector('.parent');parent.insertBefore(newPara, parent.firstChild); // 插入到开头
• 删除元素：

  remove()（现代浏览器）：const oldPara = document.querySelector('p');oldPara.remove();

  removeChild()（兼容旧浏览器）：const parent = document.querySelector('.parent');const child = parent.querySelector('.child');parent.removeChild(child);

1. 确保 DOM 加载完成：

   将脚本放在 <body> 末尾，或监听 DOMContentLoaded 事件：document.addEventListener('DOMContentLoaded', () => { // 操作 DOM 的代码});

2. 优化性能：

   减少频繁操作 DOM 引发的重排（Reflow）和重绘（Repaint）。

   批量修改样式时，使用 classList 或 cssText 而非逐条设置 style。

3. 安全性：

   避免直接使用 innerHTML 插入用户输入的内容，防止 XSS 攻击。

4. 兼容性：

   旧版浏览器可能不支持 classList 或 remove()，需做兼容处理。

DOM 是 JavaScript 与网页交互的桥梁，通过获取、修改、增删元素实现动态效果。掌握核心方法（如 getElementById、querySelector、textContent、classList）并注意性能与安全，即可高效操作 DOM。