要 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助手提供，问题来源于学员提问
