JavaScript 节点操作简介

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

在JavaScript中，节点操作是指对DOM（文档对象模型）树中的元素进行创建、查找、修改和删除等操作。DOM树是浏览器将HTML文档解析后形成的结构化表示，每个节点代表文档中的一个部分，如元素、属性、文本等。

节点操作方法

创建新节点

• createElement(tagName): 创建一个新的HTML元素节点。

  var newDiv = document.createElement("div");
  1

插入节点

• appendChild(node): 将一个子节点添加到指定父节点的子节点列表末尾。

  var parentDiv = document.getElementById("parent");
  parentDiv.appendChild(newDiv);
  1
  2

• insertBefore(newNode, referenceNode): 在指定的参考节点之前插入一个新节点。

  var referenceDiv = document.getElementById("reference");
  parentDiv.insertBefore(newDiv, referenceDiv);
  1
  2

删除节点

• removeChild(node): 从父节点中删除一个子节点。

  parentDiv.removeChild(newDiv);
  1

替换节点

• replaceChild(newNode, oldNode): 用新节点替换旧节点。

  var oldDiv = document.getElementById("old");
  parentDiv.replaceChild(newDiv, oldDiv);
  1
  2

查找节点

• getElementById(id): 根据ID获取元素节点。

  var element = document.getElementById("someId");
  1

• getElementsByClassName(className): 获取具有指定类名的所有元素节点集合。

  var elements = document.getElementsByClassName("someClass");
  1

• getElementsByTagName(tagName): 获取具有指定标签名的所有元素节点集合。

  var elements = document.getElementsByTagName("div");
  1

• querySelector(selector): 返回匹配指定CSS选择器的第一个元素。

  var element = document.querySelector(".someClass #someId");
  1

• querySelectorAll(selector): 返回匹配指定CSS选择器的所有元素节点集合，结果是一个NodeList对象。

  var elements = document.querySelectorAll(".someClass div");
  1

注意事项

1. 跨浏览器兼容性：虽然大部分DOM操作方法在现代浏览器中表现一致，但在旧版浏览器中可能存在差异，使用时应注意兼容性问题。
2. 性能：频繁操作DOM会影响页面性能，尽量减少直接操作DOM的次数，考虑批量操作或使用DocumentFragment等技术优化。
3. 内存泄漏：删除元素时，确保解除对该元素及其子元素的引用，防止内存泄漏。

应用场景

• 动态内容加载：如分页加载更多数据、Ajax请求后更新页面内容。
• 表单验证与交互：实时反馈表单填写情况，动态显示错误提示或成功信息。
• UI组件开发：构建可复用的UI组件，如模态框、轮播图等。
• 页面布局调整：根据窗口大小或用户操作动态调整页面布局。
• 事件监听与处理：给新创建或修改的元素绑定事件监听器。

通过灵活运用DOM节点操作，开发者可以实现丰富的网页交互效果和动态内容管理。