深度优先遍历和广度优先遍历_i++


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>深度优先遍历和广度优先遍历</title>
</head>

<body>
    <div class='parent'>
        <div class="child-1">
            <div class="child-1-1"></div>
            <div class="child-1-2"></div>
        </div>
        <div class="child-2">
            <div class="child-2-1"></div>
            <div class="child-2-2"></div>
        </div>
    </div>
    <script>
        //深度优先遍历  parent  child-1 child-1-1 child-1-2 child-2 child-2-1 child-2-2
        var node = document.querySelector('.parent');
        function deepItreator(node, nodeList = []) {
            if (node) {
                nodeList.push(node);
                let children = node.children;
                for (let i = 0; i < children.length; i++) {
                    deepItreator(children[i], nodeList)
                }
            }
            return nodeList;
        }


        function deepItreator2(node) {
            let stack = []
            let nodes = []
            if (node) {
                stack.push(node)
                while (stack.length) {
                    let item = stack.pop()
                    let children = item.children
                    nodes.push(item)
                    for (let i = children.length - 1; i >= 0; i--) {
                        stack.push(children[i])
                    }
                }
            }
            return nodes
        }


        //广度优先遍历  parent  child-1  child-2  child-1-1 child-1-2 child-2-1 child-2-2

        function wideIterator(node) {
            let nodes = []
            let stack = []
            if (node) {
                stack.push(node)
                while (stack.length) {
                    let item = stack.shift()
                    let children = item.children
                    nodes.push(item)
                    for (let i = 0; i < children.length; i++) {
                        stack.push(children[i])
                    }
                }
            }
            return nodes
        }
    </script>
</body>

</html>


深度优先
深度优先遍历和广度优先遍历_html_02



广度优先



深度优先遍历和广度优先遍历_深度优先遍历和广度优先遍历_03