要 hook appendChild 方法并打印添加的文本节点值，你可以通过重写原始的 appendChild 方法来实现。以下是一个示例，展示如何做到这一点：
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hook appendChild</title></head><body><div id="parent"></div><script>// 保存原始的 appendChild 方法const originalAppendChild = Node.prototype.appendChild;// 重写 appendChild 方法Node.prototype.appendChild = function(child) {// 在调用原始方法之前进行处理if (child.nodeType === Node.TEXT_NODE) {console.log("Appending text node with value:", child.nodeValue);}// 调用原始的 appendChild 方法return originalAppendChild.call(this, child);};// 创建并添加一个新的文本节点const newTextNode = document.createTextNode("Hello, I'm a new node!");const parentNode = document.getElementById('parent');parentNode.appendChild(newTextNode); // 此时会触发 hook</script></body></html>
解释
保存原始方法：
const originalAppendChild = Node.prototype.appendChild;
我们首先保存原来的
appendChild方法，以便在我们的新实现中调用它。重写
appendChild：Node.prototype.appendChild = function(child) {if (child.nodeType === Node.TEXT_NODE) {console.log("Appending text node with value:", child.nodeValue);}return originalAppendChild.call(this, child);};
在这里，我们定义了一个新的函数，当任何节点调用
appendChild时，这个函数会被执行。我们检查传入的节点是否为文本节点（使用nodeType），如果是，就打印它的值。创建并添加文本节点：
const newTextNode = document.createTextNode("Hello, I'm a new node!");parentNode.appendChild(newTextNode); // 此时会触发 hook
当你运行这个示例时，控制台将打印出 “Appending text node with value: Hello, I’m a new node!“，表明我们成功地 hook 了 appendChild 并且能够打印添加到 DOM 的文本值。
内容由零声教学AI助手提供，问题来源于学员提问
