解锁 JavaScript DOM：节点操作的核心方法与最佳实践
引言
在当今动态化的 Web 世界中，用户早已不满足于静态的网页展示，而是期待流畅的交互体验——点击按钮弹出菜单、滚动页面加载数据、实时搜索过滤内容……这些功能的背后，都离不开 JavaScript DOM（文档对象模型）操作。
DOM 是浏览器将 HTML 文档解析成的树状结构，而 JavaScript 则赋予我们“操控这棵树”的能力。无论是动态更新内容、响应用户事件，还是构建复杂的单页应用（SPA），DOM 节点操作都是前端工程师的核心技能之一。
一、节点操作
如果把网页比作一座房子，那么DOM节点就是搭建这座房子的"乐高积木"。在浏览器渲染网页时，它会将HTML文档解析成一个由各种节点组成的树状结构，这就是我们所说的文档对象模型(DOM)。
- 文档节点(Document Node):树的根节点，代表整个HTML文档。
- 元素节点(Element Node):代表HTML元素，例如<div>、<p>、<a>等。
- 属性节点(Attribute Node):代表HTML元素的属性，例如id、class、href等。
- 文本节点(Text Node):代表HTML元素中的文本内容。
- 注释节点(CommentNodes):代表注释
二、获取dom
2.1 childNodes
元素的子节点，包括元素节点和文本节点等。
示例：
<body><div class="father"><div class="child1"></div><div class="child2"></div><div class="child3"></div><div class="child4"></div><div class="child5"></div></div><script>var father = document.querySelector('.father');console.log(father.childNodes); </script>
</body>在控制台输出：
因为div的代码间存在回车空格，所以会出现六个text文本节点，删掉回车就不存在文本节点。
2.2 children
获取所有子元素节点（只包括元素节点）。
示例：
<body><div class="father"><div class="child1">one</div><div class="child2">two</div><div class="child3">three</div><div class="child4">four</div><div class="child5">five</div></div><script>var father = document.querySelector('.father');console.log(father.children); var children = father.children;console.log(children[2]);</script>在控制台输出：
2.3 parentElement
获取最近的父元素节点。
示例：
<body><div class="father"><div class="child1">one</div><div class="child2">two</div><div class="child3">three</div><div class="haha"></div><div class="child4">four</div><div class="child5">five</div></div><script>var haha = document.querySelector('.haha');console.log(haha.parentElement);console.log(haha.parentElement.children[0]);</script>
</body>在控制台输出：
可以通过父元素找到其任意一个子元素。
2.4 firstElementChild
获取第一个子元素节点。
示例：
var father = document.querySelector('.father');
console.log(father.firstElementChild);在控制台输出：
2.5 lastElementChild
获取最后一个子元素节点
示例：
var father = document.querySelector('.father');
console.log(father.lastElementChild);在控制台输出：
2.6 nextElementSibling
获取下一个兄弟元素。
示例：
var haha = document.querySelector('.haha');console.log(haha.nextElementSibling);在控制台输出：
2.6 previousElementSibling
获取上一个兄弟元素。
示例：
var haha = document.querySelector('.haha');console.log(haha.previousElementSibling);在控制台输出：
三、dom的操作
在网页开发中，DOM节点的创建与添加是实现动态交互的基础。
3.1 创建dom
◾createElement()
形式：document.createElement("tagName")
3.2 添加dom
◾appendChild()
在目标元素内部的最后添加一个元素。
形式：element.appendChild(node)
示例：
<body><div class="father"><div class="child1">one</div><div class="child2">two</div><div class="child3">three</div><div class="haha"></div><div class="child4">four</div><div class="child5">five</div></div><div class="add" onclick="add()">给父视图添加一个子视图</div><script>function add(){//创建元素节点 替代旧的innerHTMLvar child = document.createElement('div');child.innerText = '我是新创建的';//添加节点father.appendChild(child);}</script>
</body>在前端显示：
◾prepend()
在目标元素内部的最前添加一个元素。
形式：element.prepend(node)
示例：
<body><div class="father"><div class="child1">one</div><div class="child2">two</div><div class="child3">three</div><div class="haha"></div><div class="child4">four</div><div class="child5">five</div></div><div class="add" onclick="add()">给父视图添加一个子视图</div><script>function add(){//创建元素节点 替代旧的innerHTMLvar child = document.createElement('div');child.innerText = '我是新创建的';//添加节点father.prepend(child);}</script>
</body>在前端显示：
3.3 删除dom
◾remove()
形式：element.remove()
示例:
var father = document.querySelector('.father');var children = father.children;children[1].remove();前端显示：
3.4 克隆dom
◾cloneNode()
形式：element.cloneNode(deep)
⚪deep：false(默认值) - 复制元素； true - 复制元素和内容
示例：
var brother = children[0].cloneNode(true);
console.log(brother);在控制台输出:
总结
DOM（文档对象模型）是JavaScript操作网页内容的核心，通过它我们可以动态地访问、修改、添加或删除页面元素。掌握DOM操作，能让你的网页“活”起来，实现交互效果与数据动态更新。
虽然初学可能觉得有些抽象，但多练习几次就会得心应手！DOM是前端开发的必备技能，也是迈向更复杂框架（如React、Vue）的基础。不妨动手写个小demo试试，你会发现它其实很有趣！
继续探索吧，未来的前端大神就是你！ 💪🚀