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

Question

我从一个范围得到一个DocumentFragment，这是从一个选择中得到的：

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

如何迭代地修改DocumentFragment?

• How中的所有节点，我可以重新插入这个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
...