js原生dom操作

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它表示文档的结构，并使程序能够更改内容、结构和样式。

基础概念：

• 元素节点：HTML标签对应的DOM节点。
• 文本节点：元素节点中的文本内容。
• 属性节点：元素的属性。

相关优势：

• 直接操作HTML文档结构，实现动态更新。
• 可以遍历和修改DOM树。
• 与CSS结合，实现页面样式的动态改变。

常见类型：

• 元素节点操作：创建、删除、修改元素。
• 属性操作：获取和设置元素属性。
• 事件操作：绑定和解绑事件。

应用场景：

• 动态内容更新：例如实时显示时间、天气等。
• 表单验证：在提交表单前检查用户输入。
• 交互效果：如点击按钮显示隐藏内容。

常见问题及解决方法：

1. DOM操作导致页面重排和重绘频繁，影响性能：
   • 解决方法：减少不必要的DOM操作，可以先将更改的内容在内存中进行，然后一次性更新到DOM上。使用DocumentFragment来批量操作DOM。

• 事件处理程序过多导致内存泄漏：
  • 解决方法：在不需要事件处理程序时，及时解绑事件。使用事件委托来减少事件处理程序的数量。
• 获取元素时返回null：
  • 原因：尝试获取的元素在DOM中不存在，可能是因为脚本执行时机过早。
  • 解决方法：将脚本放在文档底部，或者使用DOMContentLoaded事件确保DOM加载完成后再执行脚本。

示例代码：

创建一个新的<p>元素，并添加到页面中：

// 创建新的<p>元素
var newParagraph = document.createElement("p");

// 设置文本内容
newParagraph.textContent = "这是一个新的段落。";

// 添加到body中
document.body.appendChild(newParagraph);

获取元素并修改其属性：

// 获取id为"myButton"的元素
var button = document.getElementById("myButton");

// 修改按钮的文本内容
button.textContent = "点击我";

// 绑定点击事件
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

在实际开发中，为了提高性能和代码可维护性，通常会结合使用现代的前端框架（如React、Vue等）来管理和操作DOM，而不是直接进行原生的DOM操作。