文档操作方法得合理使用

博主介绍： ✌全网粉丝5W+，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验✌

博主作品： 《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目，可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程，企业实战开发。《微服务实战》专栏是本人的实战经验总结，《Spring家族及微服务系列》专注Spring、SpringMVC、SpringBoot、SpringCloud系列、Nacos等源码解读、热门面试题、架构设计等。除此之外还有不少文章等你来细细品味，更多惊喜等着你哦

🍅 uniapp微信小程序 🍅面试题软考题免费使用，还可以使用微信支付，扫码加群。由于维护成本问题得不到解决，可能将停止线上维护。

🍅 文末获取联系 🍅精彩专栏推荐订阅👇🏻👇🏻 不然下次找不到哟

Java项目案例《100套》

uniapp小程序《100套》

有需求代码永远写不完，而方法才是破解之道，抖音有实战视频课程，某马某千等培训都是2万左右，甚至广东有本科院校单单一年就得3万4年就12万学费，而且还没有包括吃饭的钱。所以很划算了。另外博客左侧有源码阅读专栏，对于求职有很大帮助，当然对于工作也是有指导意义等。在大城市求职，你面试来回一趟多多少少都在12块左右，而且一般不会一次性就通过，还得面试几家。而如果你对源码以及微服务等有深度认识，这无疑给你的面试添砖加瓦更上一层楼。

最后再送一句：最好是学会了，而不是学废了！！

最近在工作开发中遇到了一个小挑战，去掉组件里面的一些文字，研究了好久，原来是树形组件渲染需要一定的时间，需要使用延时才能看到效果。但是去掉后，把一些元素也去掉了，是因为方法用的不对，得使用内嵌的方法去掉。

树形展开/收缩效果消失的原因可能是你在修改 textContent 时，意外破坏了 DOM 结构或事件绑定。以下是一些可能的原因和解决方法：

1. 检查 DOM 结构

修改 textContent 时，可能会覆盖掉某些子元素（例如展开/收缩按钮的图标或事件绑定）。确保你只修改文本内容，而不是整个元素的 HTML。

错误示例：

element.textContent = element.textContent.replace('分组:', '');

如果 element 包含子元素（如按钮图标）， textContent 会覆盖所有子元素。

正确示例：

const span = element.querySelector('span'); // 找到包含文本的子元素
if (span) {
  span.textContent = span.textContent.replace('分组:', '');
}

2. 保留展开/收缩按钮

树形组件的展开/收缩按钮通常是动态生成的，可能是一个 <span> 或 <i> 元素。确保在修改文本内容时，不要覆盖这些按钮。

示例：

document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {
  const textNode = Array.from(element.childNodes).find(node => node.nodeType === Node.TEXT_NODE);
  if (textNode) {
    textNode.textContent = textNode.textContent.replace('分组:', '');
  }
});

解释：

• element.childNodes ：获取元素的所有子节点（包括文本节点和元素节点）。
• node.nodeType === Node.TEXT_NODE ：找到文本节点。
• 只修改文本节点的内容，避免破坏其他子元素。

3. 使用 innerHTML 替代 textContent

如果文本内容和子元素混合在一起，可以使用 innerHTML 来精确替换文本内容。

示例：

document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {
  element.innerHTML = element.innerHTML.replace('分组:', '');
});

注意：

• innerHTML 会重新解析 HTML，可能会导致性能问题或事件绑定丢失。
• 如果组件依赖于事件委托或动态绑定， innerHTML 可能会破坏这些功能。

4. 重新绑定事件

如果修改 textContent 或 innerHTML 导致事件丢失，可以尝试重新绑定事件。

示例：

function updateTreeText() {
  document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {
    element.textContent = element.textContent.replace('分组:', '');
  });

  // 重新绑定展开/收缩事件
  bindTreeEvents();
}

function bindTreeEvents() {
  document.querySelectorAll('.lee-grid-group-togglebtn').forEach(button => {
    button.addEventListener('click', () => {
      console.log('展开/收缩按钮被点击');
      // 展开/收缩逻辑
    });
  });
}

setTimeout(updateTreeText, 3000);

5. 使用组件提供的方法

如果你使用的是某个 UI 组件库（如 Ant Design、Element UI 等），通常会有内置的方法来修改文本内容，而不破坏组件的功能。

示例：Ant Design Tree

const treeData = [
  {
    title: '分组:测试001',
    key: '1',
    children: [
      {
        title: '子节点 1',
        key: '1-1',
      },
    ],
  },
];

// 去掉“分组”字样
const newTreeData = treeData.map(node => {
  return {
    ...node,
    title: node.title.replace('分组:', ''),
  };
});

// 更新树形组件
treeRef.current.updateTreeData(newTreeData);

6. 调试工具检查

使用浏览器的开发者工具（F12）检查 DOM 结构，确认修改后的元素是否仍然包含展开/收缩按钮。

• 打开开发者工具，切换到 Elements 面板。
• 找到 .lee-grid-grouprow-cell 元素，检查其子元素是否完整。
• 如果按钮丢失，说明修改方式有问题。

7. 延迟修改

如果组件在初始化时需要一些时间完成渲染，可以增加延迟时间。

示例：

setTimeout(() => {
  document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {
    const textNode = Array.from(element.childNodes).find(node => node.nodeType === Node.TEXT_NODE);
    if (textNode) {
      textNode.textContent = textNode.textContent.replace('分组:', '');
    }
  });
}, 5000); // 延迟 5 秒执行

总结

• 避免覆盖子元素 ：确保只修改文本内容，而不是整个元素的 HTML。
• 保留展开/收缩按钮 ：检查 DOM 结构，确保按钮未被覆盖。
• 重新绑定事件 ：如果事件丢失，重新绑定展开/收缩事件。
• 使用组件方法 ：如果使用 UI 组件库，优先使用内置方法。
• 调试工具检查 ：使用开发者工具确认 DOM 结构是否完整。

通过以上方法，你应该能够解决树形展开/收缩效果消失的问题！

3