如何实现聊天窗口输入，最新文本置于最下方？

一、原理利用 MutationObserver 对象对元素的监听能力

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
MDN参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

二、具体实现

1 创建一个MutationObserver 对象，并传入一个回调函数。

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

2 对创建的观察器实例进行元素的绑定、同时设置需要监听哪些属性。

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

observer.observe(targetNode, config);

3 关键的 callback 函数，这里在监听到（比如该元素增加了子元素之后）触发后，如何处理滚动条

// 当观察到变动时执行的回调函数
const callback = (mutationsList, observer) => {
     mutationsList[0].target.scrollTop = mutationsList[0].target.scrollHeight;
};

## 关于 callback 的 mutationsList 对象常用属性
1.type：表示变化的类型，可以是 "attributes"（属性变化）、"characterData"（文本内容变化）或 "childList"（子节点变化）。
2.target：表示发生变化的节点，返回一个 DOM 元素对象。
3.addedNodes：在子节点变化时，表示添加的新节点的集合（NodeList）。
4.removedNodes：在子节点变化时，表示被移除的节点的集合（NodeList）。
5.attributeName：在属性变化时，表示发生变化的属性名称。
6.oldValue：在属性或文本内容变化时，表示变化前的属性值或文本内容。
7.previousSibling：在子节点变化时，表示发生变化的节点的前一个兄弟节点。
8.nextSibling：在子节点变化时，表示发生变化的节点的后一个兄弟节点。

mutationsList.forEach((mutation) => {
    console.log('变化类型：', mutation.type);
    console.log('发生变化的节点：', mutation.target);
    console.log('添加的新节点：', mutation.addedNodes);
    console.log('被移除的节点：', mutation.removedNodes);
    console.log('发生变化的属性名称：', mutation.attributeName);
    console.log('变化前的属性值/文本内容：', mutation.oldValue);
    console.log('前一个兄弟节点：', mutation.previousSibling);
    console.log('后一个兄弟节点：', mutation.nextSibling);
    // 进行其他处理...
  });

4 组件卸载之后，需要清除观察器。

// 停止观察
observer.disconnect();

创建一个 MutationObserver 对象，并将一个回调函数作为参数传递给构造函数。回调函数将在 DOM 变化时被调用。

回调函数通过修改目标元素的 scrollTop 属性，将滚动条位置设置为滚动内容的高度，实现将对话框滚动到底部的效果。

使用 observer.observe() 方法将 dom 元素作为观察目标，并通过传递一个配置对象来指定需要观察的变化类型。其中，childList: true 表示监听子节点的添加或删除操作。