如何在不改变子元素格式的情况下格式化元素的内部html文本?(选择器)

Question

我有一个结构如下的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">
<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>

我正在尝试改变"这是p标签内的一些测试"不透明度，不影响图标的不透明度。什么好主意吗?

我已经检查了选择器文档，但我没有看到任何可以帮助的。

重要提示:这个html是由VueJS组件生成的，所以它们实际上是按照它们所看到的样子呈现的，我正在寻找一个选择器，它只从p标签中获取原始文本来设置样式，但不选择p标签中的其他元素。

Answer 1

这是有可能的，因为它们是不同的节点。

var text = "hello world";
document.querySelector("p").firstChild.data = text;

<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">
<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>