Javascript 从子标记获取纯文本

我正在使用输入自定义CSS代码，但该库将span标记添加到我想要获取的文本中

比如说

<pre>
<code class="language-css hljs" contenteditable="true" id="css-code">
<span class="token selector"><span class="hljs-selector-class">.spacer-line</span></span> <span class="token punctuation">{</span>
    <span class="token property"><span class="hljs-attribute">border-bottom-width</span></span><span class="token punctuation">:</span> <span class="hljs-number">20px</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">width</span></span><span class="token punctuation">:</span> <span class="hljs-number">50%</span><span class="token punctuation">;</span>
    <span class="token property"><span class="hljs-attribute">border-color</span></span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>
</pre>

我需要这个。 我怎样才能得到它

更新

无论出于何种原因，如果我使用此代码：

<pre class=" language-css"><code class="language-css hljs" contenteditable="true" id="css-code"></code>
</pre>

我得到了pre标记和code标记，但没有span标记 价值结果：

---

和textContent的空白值

您可以选择元素并使用

innerText

或

textContent

获取元素的文本内容：

console.log（document.querySelector（'pre'）.textContent.trim（））

.间隔线{
边框底宽：20px；
宽度：50%；
边框颜色：黑色；
}

---

您可以选择元素并使用

innerText

或

textContent

获取元素的文本内容：

console.log（document.querySelector（'pre'）.textContent.trim（））

.间隔线{
边框底宽：20px；
宽度：50%；
边框颜色：黑色；
}

---

出于任何原因，查询选择或给我标签，但里面没有任何内容，我编辑了我的question@AndréCuellarAvaroma，正如代码示例给出的预期输出一样，我猜在您的开发环境中可能有一些不同的东西导致了问题，但不知道问题可能是什么。出于任何原因，queryselector给我标签，里面没有任何东西，我编辑了我的question@AndréCuellarAvaroma，正如代码示例给出的预期输出一样，我猜在您的开发环境中可能有一些不同的东西导致了这个问题，但不知道塔尔可能是什么。

let value = document.querySelector('pre');
console.log(value.textContent);

<pre class=" language-css"><code class="language-css hljs" contenteditable="true" id="css-code"></code>
</pre>