jqueryをjavascriptに変換したい

Question

以下jqueryのコードをjavascriptを使って同じconsoleが取れるように変換したいのですが、やり方がわかりません。
おそらくjquery同様、配列で取得しなければならないんだと思われますが、当方Javascript初心者にて、
方法がわからず、困っております。
お力添えお願いできませんでしょうか？

    <div id="main">
        <ul>
            <li><img src="images/91356751_cb249cee19_o.jpg" alt="タイトル00"></li>
            <li><img src="images/91741178_f199a7d1a0_o.jpg" alt="タイトル01"></li>
            <li><img src="images/91741350_e7b97aea57_o.jpg" alt="タイトル02"></li>
            <li><img src="images/100379577_99beca500a_o.jpg" alt="タイトル03"></li>
            <li><img src="images/100379776_c2239096f3_o.jpg" alt="タイトル04"></li>
            <li><img src="images/107150612_93dfd5a6bb_o.jpg" alt="タイトル05"></li>
            <li><img src="images/107545824_b0e6a31bbd_o.jpg" alt="タイトル06"></li>
            <li><img src="images/109630285_eadfdb879f_o.jpg" alt="タイトル07"></li>
            <li><img src="images/110439658_1a79abcb8a_o.jpg" alt="タイトル08"></li>
            <li><img src="images/110439974_a9b1e47401_o.jpg" alt="タイトル09"></li>
        </ul>
    </div>

    * {
        margin: 0;
        padding: 0;
    }

    #main {
        width: 960px;
        margin: 0 auto;
    }

    #main ul {
        list-style: none;
    }

    #main ul li {
        float: left;
        width: 230px;
        margin: 5px;
    }

    #main li img {
        width: 230px;
        height: 167px;
        display: none;
        opacity: 0;
    }

    #loading {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -16px 0 0 -16px;
    }

    <script>

        //jquery
                $(function () {
                    var srcList = [];
                    function init() {
                        $("#main").find("img").each(function (index) {
                            srcList[index] = $(this).attr("src");
                            console.log(srcList)
                        });
                    };
                    init();
                });

    </script>

↓jQueryのコンソール画面(javascriptを使ってこれと同じものを取得したい)

//試してみたこと

        (function () {
            var srcList = [];
            function init() {
                var img = document.getElementsByTagName("img");
                for (let i = 0; i < img.length; i++) {
                    var imgSrc = img[i].getAttribute('src');
                    console.log(imgSrc)

                }
            };
            init();
        })();

↓Javascriptのコンソール画面

返信をいただいて、配列で入れてみました

        (function () {
            function init() {
                var img = document.getElementsByTagName("img");
                for (let i = 0; i < img.length; i++) {
                    var imgSrc = img[i].getAttribute('src');
                    var array = [imgSrc]
                    console.log(array)
                }
            };
            init();
        })();

Answer 1

以下のように修正してみるといかがでしょうか？

        (function () {
            function init() {
+               var array = [];
                var img = document.getElementsByTagName("img");
                for (let i = 0; i < img.length; i++) {
                    var imgSrc = img[i].getAttribute('src');
-                   var array = [imgSrc]
+                   array.push(imgSrc);
                    console.log(array)
                }
            };
            init();
        })();

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/wvKWOML?editors=1012

Answer 2

取るところ自体はそれで問題ないのですが、変更後のコードではにsrcListへ詰める操作がなくなっています。

Comments

[MTON]

ご返信ありがとうございます。
配列にしてみたのですが、jqueryのコンソール画面のようにルｰﾌﾟごとに画像がふえていくようにするには、どうすればよいのでしょうか？

Answer 3

とりあえず使われていない変数を使えばよいのでは。

srcList[i] = img[i].getAttribute('src');
console.log(srcList)

Comments

[MTON]

ご返信ありがとうございます。
一旦、[]を使って、配列にしてみたのですが、jqueryのコンソール画面のようにルｰﾌﾟごとに画像がふえていくようにするには、どうすればよいのでしょう？

[kei344]

提示しているコードになぜ差し替えないのでしょうか。

[MTON]

ご返信ありがとうございます。
勘違いしておりました。
解決しました。
ありがとうございます。