DOM 替换节点学习笔记

在 Web 开发中，我们经常需要对 DOM 树进行增删改查操作。其中，替换节点是一种比较常见的需求。本文将介绍如何使用 JavaScript 操作 DOM 替换节点。

replaceChild() 方法

DOM 提供了一个 replaceChild() 方法，可以用来将一个节点替换成另一个节点。该方法需要接收两个参数：

新节点
被替换的节点

示例代码：

javascriptCopy Code
// 获取需要被替换的节点
const oldNode = document.getElementById('oldNode');

// 创建新节点
const newNode = document.createElement('div');
newNode.innerText = '这是新节点';

// 替换节点
oldNode.parentNode.replaceChild(newNode, oldNode);

上述代码中，我们首先通过 getElementById() 方法获取需要被替换的节点 oldNode，然后创建一个新节点 newNode，并设置其内容为“这是新节点”。最后，使用父节点的 replaceChild() 方法将 newNode 替换为 oldNode。

实例：无限下拉列表

在很多网站和应用中，我们会看到一些无限下拉列表，即用户滚动到底部时，会自动加载更多数据。下面是一个简单的无限下拉列表的实现示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>无限下拉列表</title>
    <script>
      let pageNum = 1; // 当前页码
      const pageSize = 10; // 每页数据量

      function loadMore() {
        // 发送请求获取更多数据
        // ...

        const data = [...]; // 假设这里获取到了新数据

        // 将新数据添加到列表中
        const list = document.getElementById('list');
        for (let i = 0; i < data.length; i++) {
          const item = document.createElement('li');
          item.innerText = data[i];
          list.appendChild(item);
        }

        pageNum++; // 更新页码
      }

      window.addEventListener('scroll', function () {
        const scrollTop = document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight;
        const clientHeight = document.documentElement.clientHeight;

        if (scrollTop + clientHeight >= scrollHeight) {
          loadMore();
        }
      });
    </script>
  </head>
  <body>
    <ul id="list">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <!-- ... -->
    </ul>
  </body>
</html>

该示例中，我们通过监听 window 对象的 scroll 事件，判断当前滚动位置是否已经到达页面底部。如果是，则调用 loadMore() 方法加载更多数据，然后将新数据添加到列表中。

需要注意的是，在实际应用中，我们往往需要在 loadMore() 方法中使用异步请求获取数据。并且，为了避免过多重复请求，我们还需要对请求进行节流或防抖等处理。