如何修改节点textValue且不删除childNodes？链接文本转大写丢失img标签

直接设置元素的textContent（也就是你说的textValue）会直接替换掉它所有的子节点，包括<a>、<img>这类元素节点。要保留子节点的同时修改文本内容，核心思路是只遍历并修改元素内部的文本节点，而非直接覆盖整个元素内容。

针对你给出的HTML示例，比如我们想修改<body>内的文本但保留所有子节点，可以这么写代码：

function modifyTextNodes(element, modifyFn) {
  // 把节点集合转成数组方便遍历
  const childNodes = Array.from(element.childNodes);
  childNodes.forEach(node => {
    // 只处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = modifyFn(node.textContent);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 如果是元素节点，递归处理它的子节点
      modifyTextNodes(node, modifyFn);
    }
  });
}

// 调用示例：把<body>里所有文本转成小写
const body = document.querySelector('body');
modifyTextNodes(body, text => text.toLowerCase().trim());

这样就能在保留所有<a>、<img>等子节点的前提下，精准修改文本内容啦。

这个问题的根源就是你直接设置了<a>标签的textContent——这个操作会把<a>内部所有子节点（包括<img>）全部替换成文本，自然会导致图片消失。解决方法和问题1一致：只修改<a>标签内的文本节点，跳过元素节点。

具体实现代码如下：

// 获取页面所有链接
const links = document.querySelectorAll('a');

links.forEach(link => {
  const childNodes = Array.from(link.childNodes);
  childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {
      // 仅将文本节点转成大写，顺便去掉多余空格
      node.textContent = node.textContent.toUpperCase().trim();
    }
    // 遇到<img>这类元素节点直接跳过，不会被修改或删除
  });
});

运行这段代码后，链接里的<img>会被完整保留，只有文本部分会变成大写，再也不会出现图片被误删的问题了。

内容的提问来源于stack exchange，提问作者Bidoubiwa