引言：理解DOM结构中的文本与元素
在构建复杂的网页界面时，我们经常会遇到需要对特定文本进行样式调整，但又不希望这些样式影响到其父元素内部其他子元素的情况。例如，一个<p>标签可能包含一段直接的文本，同时又嵌套了一个<div>或其他交互式组件（如图标）。直接对<p>标签应用CSS样式（如opacity）通常会导致所有子元素继承这些样式，从而达不到预期效果。
考虑以下HTML结构：
<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" data-original-title="Title test" 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">
<!-- SVG paths omitted for brevity -->
</svg>
</i>
</div>
</div>
</p>在这个例子中，"This is some test inside the p tag" 是<p>元素的直接文本内容，而内部的<div>和<i>（包含SVG图标）是其子元素。如果直接对<p>应用opacity: 0.5;，整个段落及其内部的图标都会变得半透明，这可能不是我们想要的效果。
要实现对直接文本内容的独立样式化，我们需要理解DOM（文档对象模型）是如何表示这些内容的。在DOM中，文本内容被视为Text节点，与Element节点（如<div>, <i>）是不同的节点类型。标准的CSS选择器主要针对Element节点，因此无法直接选中并样式化一个纯粹的Text节点。
立即学习“前端免费学习笔记（深入）”；
通过JavaScript识别和访问文本节点
JavaScript提供了访问和操作DOM节点的强大能力。我们可以通过Node.firstChild属性获取元素的第一个子节点，并通过Node.nodeType属性来判断该节点的类型。
- Node.ELEMENT_NODE (值为 1)：表示一个元素节点。
- Node.TEXT_NODE (值为 3)：表示一个文本节点。
以下代码演示了如何识别并访问<p>元素的第一个文本节点：
document.addEventListener('DOMContentLoaded', () => {
const pElement = document.querySelector("p");
if (pElement) {
const firstChild = pElement.firstChild;
// 检查第一个子节点是否存在且是文本节点
if (firstChild && firstChild.nodeType === Node.TEXT_NODE) {
console.log("找到文本节点:", firstChild.data); // firstChild.data 存储文本内容
// 此时，你可以修改文本内容
// firstChild.data = "新的段落文本内容";
} else {
console.log("第一个子节点不是文本节点或不存在。");
}
}
});通过firstChild.data（或firstChild.textContent），我们可以获取或修改文本节点的内容。然而，仅仅修改内容并不能直接应用CSS样式。
实现文本节点独立样式化的策略：动态包装
要对文本节点应用独立的CSS样式，最可靠的方法是将其包装在一个新的行内HTML元素（如<span>）中。这样，我们就可以通过CSS选择器精准地作用于这个新创建的<span>元素，从而实现样式的隔离。
以下是实现这一策略的步骤及示例代码：
- 获取目标父元素：使用document.querySelector()等方法选中包含目标文本的父元素。
- 识别并获取其直接文本节点：如上所述，使用firstChild和nodeType进行判断。
- 创建一个新的<span>元素：此<span>将用于包装文本并接收样式。
- 将文本节点的内容移动到<span>内部：将原始文本节点的内容赋给<span>。
- 将<span>插入回父元素中，替换掉原来的文本节点位置：使用replaceChild()方法完成替换。
示例代码：JavaScript动态包装文本节点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>独立样式化文本节点</title>
<style>
/* 样式化被包装的文本 */
.direct-text-style {
opacity: 0.5; /* 仅影响此文本的透明度 */
color: blue;
font-weight: bold;
font-size: 1.2em;
}
/* 确保子元素不受影响，或单独设置其样式 */
.some-icon-class {
opacity: 1; /* 保持图标的透明度不变 */
/* 其他样式保持不变 */
color: rgb(25, 118, 210);
}
/* 父元素可能存在的默认样式 */
p {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
display: flex; /* 示例，为了让文本和图标并排显示 */
align-items: center;
}
</style>
</head>
<body>
<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" data-original-title="Title test">
<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>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pElement = document.querySelector("p");
if (!pElement) return;
const firstChild = pElement.firstChild;
// 确保第一个子节点是文本节点且包含非空白字符
if (firstChild && firstChild.nodeType === Node.TEXT_NODE && firstChild.textContent.trim().length > 0) {
const textContent = firstChild.textContent; // 获取原始文本内容
const span = document.createElement("span"); // 创建一个新的span元素
span.classList.add("direct-text-style"); // 添加一个类名，以便CSS可以选中并样式化
// 将原始文本内容放入新的span中
span.textContent = textContent;
// 将新的span元素插入到p元素中，替换掉原来的文本节点
pElement.replaceChild(span, firstChild);
}
});
</script>
</body>
</html>在上述代码执行后，原始的HTML结构在DOM中会变为类似：
<p>
<span class="direct-text-style">This is some test inside the p tag</span>
<div class="some-class">
<!-- ... other elements ... -->
</div>
</p>现在，通过.direct-text-style这个CSS类，我们就可以精确地控制该文本的样式，例如设置opacity: 0.5;，而不会影响到<p>标签内的<div>或<i>元素的透明度。
注意事项
- 空白文本节点：HTML源代码中的换行符、空格和缩进也会被解析为Text节点。在处理firstChild时，务必检查nodeType是否为Node.TEXT_NODE，并且通过textContent.trim().length > 0来确保处理的是有意义的文本内容，而不是空白节点。
- DOM操作的性能：频繁或大规模的DOM操作可能会影响页面性能。上述方法通常在页面加载完成后执行一次，对于静态或半静态内容是高效的。
-
前端框架集成：在VueJS、React等现代前端框架中，直接操作原生DOM通常不是最佳实践。框架提供了自己的数据绑定和组件化机制来管理UI。如果您的HTML是由VueJS组件生成的，更推荐的做法是：
- 在Vue组件的模板中，直接将需要独立样式化的文本包装在一个<span>中，并为其绑定一个类名或内联样式。
- 通过Vue的数据属性（data或props）来控制<span>的类名或样式，从而实现响应式和声明式的样式管理。
- 例如：<p><span :style="{ opacity: textOpacity }">{{ someText }}</span><MyIconComponent /></p> 如果确实需要在框架环境中使用原生DOM操作，请确保在组件的生命周期钩子（如Vue的mounted）中执行，并注意避免与框架的虚拟DOM渲染机制产生冲突。
- 多个文本节点情况：如果一个元素内部有多个直接文本节点（例如 <p>文本1<b>粗体</b>文本2</p>），firstChild只会获取第一个。若需处理所有文本节点，需要遍历childNodes集合，并对每个Node.TEXT_NODE`进行包装。
总结
通过深入理解DOM中Text节点与Element节点的区别，并利用JavaScript动态地将目标文本内容包装在一个<span>元素中，我们可以有效地实现对HTML元素直接文本内容的独立样式化，而不会影响其内部的子元素。尽管原生DOM操作提供了强大的控制力，但在现代前端框架的背景下，建议优先采用框架提供的声明式方法来管理UI和样式，以保持代码的可维护性和一致性。
