CSS与JS技术问题：如何避免event.target.innerText删除内部标签

现有标签结构：

<p><a href="mailto:example@gmail.com">example@gmail.com</a></p>

执行以下代码时：

const repetitions = setInterval(x => {
      originalText = event.target.innerText;
      splitText = event.target.dataset.value.split("");
      event.target.innerText = splitText.map((character, index) => {
        
      if (index < i) {
        return event.target.dataset.value[index];
      } else {
        return codeSymbols[Math.floor(Math.random() * 26)]
      }

内部的<a>标签会被删除，最终仅保留<p>example@gmail.com</p>。
事件基于以下监听逻辑：

const hiddenElements = document.querySelectorAll("h1, h2, p, a");
hiddenElements.forEach(ele => {
  observer.observe(ele);
})

推测是监听事件检测到<p>标签后，通过event.target.tagName定位该标签，导致内部<a>标签被删除。请问如何避免这一问题？

• 过滤掉包含子元素的容器，只监听纯文本元素
  修改监听逻辑，提前过滤掉包含其他元素子节点的容器，只选择纯文本承载的元素，避免<p>这类包含<a>的外层容器被监听：

  const hiddenElements = document.querySelectorAll("h1, h2, p, a");
  hiddenElements.forEach(ele => {
    // 检查元素是否存在非文本类型的子节点
    const hasElementChildren = Array.from(ele.children).some(child => child.nodeType === 1);
    if (!hasElementChildren) {
      observer.observe(ele);
    }
  })
  

• 操作文本节点而非直接覆盖元素innerText
  不要直接给元素设置innerText（这会清空所有子元素），改为定位到元素内部的文本节点单独修改：

  // 找到目标元素内的文本节点
  const textNode = Array.from(event.target.childNodes).find(node => node.nodeType === 3);
  if (textNode) {
    const splitText = event.target.dataset.value.split("");
    const newText = splitText.map((character, index) => {
      if (index < i) {
        return event.target.dataset.value[index];
      } else {
        return codeSymbols[Math.floor(Math.random() * 26)]
      }
    }).join("");
    textNode.textContent = newText;
  }
  

• 用选择器直接锁定纯文本元素
  利用CSS伪类:not(:has(*))（注意浏览器兼容性）直接选择没有子元素的目标，跳过包含其他元素的容器：

  const hiddenElements = document.querySelectorAll("h1:not(:has(*)), h2:not(:has(*)), p:not(:has(*)), a:not(:has(*))");
  hiddenElements.forEach(ele => {
    observer.observe(ele);
  })
  

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