📌  相关文章
📜  dom 操作 js - Javascript (1)

📅  最后修改于: 2023-12-03 15:30:33.102000             🧑  作者: Mango

DOM 操作 JS - Javascript

什么是 DOM？

DOM（文档对象模型）是一种在浏览器中表示和操作 HTML、XML 和 SVG 等文档的公共接口。通过 DOM，可以使用 JavaScript 来访问和修改页面中的元素和属性。

DOM 的基本结构

DOM 的基本结构分为四个部分：

  1. 文档对象（document）：表示整个 HTML 文档，是 DOM 树的根节点。

  2. 元素节点（element）：表示 HTML 中的标签，如 <html>、<body> 等。

  3. 文本节点（text）：表示 HTML 中的文本内容。

  4. 属性节点（attribute）：表示 HTML 中元素的属性，如 class、id 等。

DOM 操作的基本方法
获取元素

可以使用以下方法来获取 HTML 中的元素：

// 获取单个元素
const element = document.getElementById('myId');
const el = document.querySelector('#myId');
const elClass = document.querySelector('.myClass');

// 获取多个元素
const elList = document.querySelectorAll('.myClass');
const elList2 = document.getElementsByClassName('myClass');
操作元素

可以使用以下方法来操作 HTML 中的元素：

// 获取元素的属性
const elAttr = element.getAttribute('myAttr');

// 修改元素的属性
element.setAttribute('myAttr', 'new value');

// 修改元素的样式
element.style.color = 'red';

// 修改元素的内容
element.innerHTML = 'New content';
创建和删除元素

可以使用以下方法来创建和删除 HTML 中的元素：

// 创建新元素
const newEl = document.createElement('p');
newEl.innerHTML = 'New paragraph';

// 添加新元素
element.appendChild(newEl);

// 删除元素
element.removeChild(newEl);
DOM 操作的注意事项

  1. 避免滥用 DOM 操作，尤其是在循环中，因为操作 DOM 的代价是很大的。

  2. 在多次访问同一元素时，应将其存储在变量中以避免重复访问。

  3. 如果需要多次修改同一元素的属性或样式，应考虑添加一个类来控制样式，而不是直接修改元素本身。

  4. 不要混用 innerHTML 和 textContent，避免 XSS 攻击。

  5. 使用事件委托来管理事件监听器，以减少对 DOM 的访问。

结论

DOM 是 JavaScript 中不可或缺的一部分。熟练掌握 DOM 的基本操作，可以让我们更好地掌控页面，从而开发出更符合用户需求的应用程序。