解锁 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

元素的子节点，包括元素节点和文本节点等。

示例：

html 复制代码

<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

获取所有子元素节点（只包括元素节点）。

示例：

html 复制代码

<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

获取最近的父元素节点。

示例：

html 复制代码

<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

获取第一个子元素节点。

示例：

javascript 复制代码

var father = document.querySelector('.father');
console.log(father.firstElementChild);

在控制台输出：

2.5 lastElementChild

获取最后一个子元素节点

示例：

javascript 复制代码

var father = document.querySelector('.father');
console.log(father.lastElementChild);

在控制台输出：

2.6 nextElementSibling

获取下一个兄弟元素。

示例：

javascript 复制代码

 var haha = document.querySelector('.haha');
    console.log(haha.nextElementSibling);

在控制台输出：

2.6 previousElementSibling

获取上一个兄弟元素。

示例：

javascript 复制代码

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)

示例：

html 复制代码

<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(){
      //创建元素节点 替代旧的innerHTML
      var child = document.createElement('div');
      child.innerText = '我是新创建的';
      //添加节点
      father.appendChild(child);
    }
    
  </script>
</body>

在前端显示：

◾prepend()

在目标元素内部的最前添加一个元素。

形式： element.prepend(node)

示例：

html 复制代码

<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(){
      //创建元素节点 替代旧的innerHTML
      var child = document.createElement('div');
      child.innerText = '我是新创建的';
      //添加节点
      father.prepend(child);
    }
    
  </script>
</body>

在前端显示：

3.3 删除dom

◾remove()

形式： element.remove()

示例:

javascript 复制代码

    var father = document.querySelector('.father');
    var children = father.children;
    children[1].remove();

前端显示：

3.4 克隆dom

◾cloneNode()

形式： element.cloneNode(deep)

**⚪deep：**false(默认值) - 复制元素； true - 复制元素和内容

示例：

javascript 复制代码

var brother = children[0].cloneNode(true);
console.log(brother);

在控制台输出:

总结

DOM（文档对象模型）是JavaScript操作网页内容的核心，通过它我们可以动态地访问、修改、添加或删除页面元素。掌握DOM操作，能让你的网页"活"起来，实现交互效果与数据动态更新。

虽然初学可能觉得有些抽象，但多练习几次就会得心应手！DOM是前端开发的必备技能，也是迈向更复杂框架（如React、Vue）的基础。不妨动手写个小demo试试，你会发现它其实很有趣！

继续探索吧，未来的前端大神就是你！ 💪🚀