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

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

文章目录

节点操作方法创建新节点插入节点删除节点替换节点查找节点 注意事项应用场景

---

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

节点操作方法

创建新节点

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

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

插入节点

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

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

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

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

删除节点

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

parentDiv.removeChild(newDiv);

替换节点

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

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

查找节点

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

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

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

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

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

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

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

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

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

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

注意事项

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

应用场景

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

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