深入理解DOM：如何精确控制父元素下直接文本的样式而不影响子元素

<p>
  This is some test inside the p tag
  <div class="some-class">
    <div class="sub-div-class">
      <i title="title test" data-toggle="tooltip" class="some-icon-class">
        <svg width="21" height="18" viewBox="0 0 16 16"></svg>
      </i>
    </div>
  </div>
</p>

// 获取第一个 <p> 元素
const pElement = document.querySelector("p");

// 获取 <p> 元素的第一个子节点。在这个例子中，它就是包含“This is some test...”的文本节点。
const textNode = pElement.firstChild;

// 检查是否确实是文本节点，并修改其内容
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
  textNode.data = "新的文本内容已替换";
  // 或者 textNode.nodeValue = "新的文本内容已替换";
  console.log("文本内容已更新为:", textNode.data);
}

<p>
  新的文本内容已替换
  <div class="some-class">
    <!-- ... 子元素保持不变 ... -->
  </div>
</p>

<!-- 原始HTML结构 -->
<p id="myParagraph">
  This is some test inside the p tag
  <div class="some-class">
    <div class="sub-div-class">
      <i title="title test" data-toggle="tooltip" class="some-icon-class" style="color: rgb(25, 118, 210);">
        <svg width="21" height="18" viewBox="0 0 16 16" fill="currentColor" version="1.1" aria-hidden="true" class="bi bi-eye-slash-fill">
          <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"></path> 
          <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"></path>
        </svg>
      </i>
    </div>
  </div>
</p>

<style>
  /* 可选：预定义一个CSS类 */
  .faded-text {
    opacity: 0.5;
    /* 其他样式 */
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const pElement = document.getElementById("myParagraph");

    // 假设第一个子节点是我们要操作的文本节点
    const targetTextNode = pElement.firstChild;

    // 确保它是一个文本节点，并且不为空白（如换行符或空格）
    if (targetTextNode && targetTextNode.nodeType === Node.TEXT_NODE && targetTextNode.nodeValue.trim().length > 0) {
      // 1. 创建一个新的 <span> 元素
      const spanWrapper = document.createElement("span");

      // 2. 将文本节点移动到新的 <span> 元素中
      spanWrapper.appendChild(targetTextNode.cloneNode(true)); // 克隆文本节点以避免直接移动可能导致的引用问题

      // 3. 将新的 <span> 元素插入到文本节点原来的位置
      pElement.replaceChild(spanWrapper, targetTextNode);

      // 4. 对 <span> 元素应用样式
      // 方式一：直接通过 style 属性
      spanWrapper.style.opacity = "0.5";
      spanWrapper.style.color = "blue"; // 示例：改变颜色

      // 方式二：添加CSS类 (推荐，更易于维护)
      // spanWrapper.classList.add("faded-text");

      console.log("直接文本内容已包裹并应用样式。");
    } else {
      console.warn("未找到符合条件的文本节点进行样式化。");
    }
  });
</script>

<p id="myParagraph">
  <span style="opacity: 0.5; color: blue;">This is some test inside the p tag</span>
  <div class="some-class">
    <!-- ... 子元素保持不变 ... -->
  </div>
</p>