我希望能够选择文本，然后单击按钮并使文本颜色更改e。不再选择文本后，文本颜色更改应保持不变。
我知道CSS已经有许多解决方案可以做到这一点。然而;我希望能够访问这些节点，以便在单击另一个按钮时可以还原颜色更改。我尝试查看window.getSelection（）以及Ranges和DocumentFragment，但是在理解如何选择DocumentFragment中的节点，修改每个节点，将其插入文档中正确位置以及创建引用时遇到了麻烦我可以在以后单击，再次将颜色更改回黑色。
我不需要CSS解决方案，也不需要使用jQuery的解决方案。
下面是我正在使用的类似html结构的js代码和codepen。
我有2个按钮，其中一个可更改选择的颜色，而一个按钮即使在不再选择文本后也将还原选择的颜色。
我正在使用window.getSelection()获得所选文本的Selection。我检查Selection是否有效，然后使用getRangeAt(0)得到一个Range，然后再调用extractContents()。
这是最困难的部分，因为：
DocumentFragment，所以如何将DocumentFragment重新插入到提取它的位置？var changeColorButton = document.getElementById('xyz');
var revertColor = document.getElementById('zyx');
const changeSelectionColor = () => {
let selection = window.getSelection()
if (selection) {
let range = selection.getRangeAt(0)
if (range) {
let frag = range.extractContents();
}
/*
2 problems:
1. accessing each node in the DocumentFragment and modifying the style then re-inserting into the correct spot
2. Creating a reference to this fragment for revertColorChange() to use to change the color back to black
*/
}
}
const revertColorChange = () => {
// revert color
}
changeColorButton.addEventListener('click', changeSelectionColor);
<!DOCTYPE html>
<html>
<body>
<button onClick="changeColor()">Change color</button><br/>
<button onClick="changeColorBack()">Change to previous color</button>
<p id="demo">Javascript</p>
<script>
changeColor=()=>{
document.getElementById("demo").style.color ="red"
}
changeColorBack=()=>{
document.getElementById("demo").style.color ="black"
}
</script>
</body>
</html>
这是您要寻找的吗？