如何修改 DocumentFragment 中的所有节点？

Question

我从一个 Range 中得到一个 DocumentFragment，它来自一个 Selection：

var foo = window.getSelection().getRangeAt(0).cloneContents()

1. 如何迭代修改 DocumentFragment 中的所有节点？
2. 如何重新插入此 DocumentFragment 以覆盖原始选择？

https://codepen.io/MichaelArnoldOwens/pen/wvMwzLY

Answer 1

// i just used Selection to get a DocumenetFragment, but this can be applied to any DocumentFragment
var contents = window.getSelection().getRangeAt(0).extractContents()
// I generate a NodeList with querySelectorAll() and pass it the wildcard selector to get all the nodes
let list = contents.querySelectorAll('*')
// I instantiate a new DocumentFragment
let newFrag = new DocumentFragment()
// I iterate through the node list and make any modifications I want to each node before appending it to the new DocumentFragment
for (let i of list) {
  i.style.color = 'red'
  newFrag.appendChild(i)
}
// you can now append your new DocumentFragment to the DOM
...