如何利用window.getSelection()获取选中的所有节点？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <div style="display: inline">测</div><div style="display: inline">试</div>
    <br>
    <div style="display: inline">测</div><div style="display: inline">试</div>
</div>
<input type="button" value="点我" onclick="f()">

<script>
    function f(){
        let a=window.getSelection();
        for(let i=0;i<a.length;i++){
            if(a[i].tagName==="DIV"){
                a[i].style.color="red";
            }
        }
    }
</script>

</body>
</html>

我希望a能是一个数组、包含选中范围内的所有节点，这样就可以使得点击按钮后、选中的所有文字都变成红色。
我知道我的a不是数组，我知道上面代码的语法是错的，但我不知道正确的语法是什么。所以我想问的是：如何让a是数组、包含选中范围内的所有节点？
（注：只考虑【被选中的所有节点都是同级的，不存在带有父节点与子节点的情况】且【每个节点只有一个字，不存在“选中这个节点中的部分文字”】的简单情形即可。）

题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~
代码来源：

javascript - JS: Get array of all selected nodes in contentEditable div - Stack Overflow Hi I've been working with contentEditable for a while now and I think I have a pretty good handle on it. One thing that's evading me is how to get an array of references to all nodes that are parti... https://stackoverflow.com/questions/7781963/js-get-array-of-all-selected-nodes-in-contenteditable-div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div style="display: inline">测</div><div style="display: inline">试</div>
        <br>
        <div style="display: inline">测</div><div style="display: inline">试</div>
    </div>
    <input type="button" value="点我" onclick="f()">
    <script>

        function nextNode(node) {
            if (node.hasChildNodes()) {
                return node.firstChild;
            } else {
                while (node && !node.nextSibling) {
                    node = node.parentNode;
                }
                if (!node) {
                    return null;
                }
                return node.nextSibling;
            }
        }

        function getRangeSelectedNodes(range) {
            var node = range.startContainer;
            var endNode = range.endContainer;

            // Special case for a range that is contained within a single node
            if (node == endNode) {
                return [node];
            }

            // Iterate nodes until we hit the end container
            var rangeNodes = [];
            while (node && node != endNode) {
                rangeNodes.push(node = nextNode(node));
            }

            // Add partially selected nodes at the start of the range
            node = range.startContainer;
            while (node && node != range.commonAncestorContainer) {
                rangeNodes.unshift(node);
                node = node.parentNode;
            }

            return rangeNodes;
        }

        function getSelectedNodes() {
            if (window.getSelection) {
                var sel = window.getSelection();
                if (!sel.isCollapsed) {
                    return getRangeSelectedNodes(sel.getRangeAt(0));
                }
            }
            return [];
        }

        function f() {
            let a = getSelectedNodes();
            console.log(a)
            for (let i = 0; i < a.length; i++) {
                if (a[i].tagName === "DIV") {
                    a[i].style.color = "red";
                }
            }
        }
    </script>
</body>
</html>

使用getElementByTagsName方法获取DIV