精准控制：在不影响子元素的前提下格式化HTML元素的直接文本内容

<p>
  This is some test inside the p tag
  <div class="some-class">
    <!-- ... more content ... -->
  </div>
</p>

// 假设HTML结构如引言所示
// <p>This is some test inside the p tag <div ...></p>

// 1. 获取目标父元素
const pElement = document.querySelector("p");

if (pElement) {
    // 2. 尝试获取第一个子节点
    const firstChildNode = pElement.firstChild;

    // 3. 检查它是否为文本节点且包含有效文本
    if (firstChildNode && firstChildNode.nodeType === Node.TEXT_NODE && firstChildNode.textContent.trim().length > 0) {
        // 4. 修改文本节点的数据
        firstChildNode.data = "新的文本内容已替换";
        console.log("文本内容已更新为:", firstChildNode.data);
    } else {
        console.log("未找到可修改的直接文本节点。");
    }
} else {
    console.warn("未找到 <p> 元素。");
}

/**
 * 动态包裹HTML元素的直接文本内容，并应用CSS样式。
 *
 * @param {string} parentSelector CSS选择器，用于定位包含目标文本的父元素。
 * @param {object} styleProperties 包含要应用的CSS属性和值的对象（如 { opacity: "0.5", color: "red" }）。
 */
function styleDirectText(parentSelector, styleProperties) {
    const parentElement = document.querySelector(parentSelector);
    if (!parentElement) {
        console.warn(`Element with selector "${parentSelector}" not found.`);
        return;
    }

    // 遍历子节点，查找第一个非空的直接文本节点
    let directTextNode = null;
    for (const child of parentElement.childNodes) {
        if (child.nodeType === Node.TEXT_NODE && child.textContent.trim().length > 0) {
            directTextNode = child;
            break; // 找到第一个非空文本节点即停止
        }
    }

    if (directTextNode) {
        // 1. 创建一个新的<span>元素
        const span = document.createElement("span");
        // 2. 将原始文本节点的内容复制到<span>中
        span.textContent = directTextNode.textContent;

        // 3. 应用传入的CSS样式
        for (const prop in styleProperties) {
            if (Object.prototype.hasOwnProperty.call(styleProperties, prop)) {
                span.style[prop] = styleProperties[prop];
            }
        }

        // 4. 将新的<span>元素插入到原始文本节点的位置
        parentElement.replaceChild(span, directTextNode);
        console.log("直接文本已成功包裹并样式化。");
    } else {
        console.log(`在元素 "${parentSelector}" 中未找到可样式化的直接文本节点。`);
    }
}

// --- 使用示例 ---
// 假设HTML结构：
// <p>
//   This is some test inside the p tag
//   <div class="some-class">
//     <div class="sub-div-class">
//       <i title="title test" class="some-icon-class">
//         <svg>...</svg>
//       </i>
//     </div>
//   </div>
// </p>

// 调用函数，将p标签的直接文本透明度设置为0.5，颜色设置为红色
styleDirectText("p", { opacity: "0.5", color: "red" });

// 如果需要，也可以通过CSS来定义span的样式，然后JS只负责添加类名
// styleDirectText("p", { className: "my-custom-text-style" });
// span.classList.add(styleProperties.className);