DOMの親子関係等を整理してみた。 #JavaScript

DOM操作に少し慣れてきたのですが、実際に書いてみると親子等の操作がまだよく理解できておらず、うまく動かないことが多いです。
そのため備忘録として投稿させていただきます。

domFamily.html

<body class="first">
body=さらに先祖
    <div class="ancestor">
        ancientor=先祖
        <div class="parent">
            parent=親要素
            <div class="prev">prev=直前にある兄弟要素</div>
            <div class="base">
            base=主とする要素＜＝
                <div id ="ch1" class="child">chi1=子要素1</div>
                <div id ="ch2" class="child">chi2=子要素2</div>
                <div id ="ch3" class="child">chi3=子要素3</div>
            </div>
            <div class="next">next=直後にある兄弟要素</div>
        </div>
    </div>

    <script>
        //親が兄弟を取得
        let bros = document.querySelector(".parent").children;
        console.dir(bros);
        //親が自分を取得
        console.dir(bros[1]);
        //親の要素を取得
        let per = document.querySelector(".base").parentElement;
        console.dir(per);
        //前の兄弟を取得
        let bro1 = document.querySelector(".base").previousElementSibling;
        console.dir(bro1);
        //後ろの兄弟を取得
        let bro2 = document.querySelector(".base").nextElementSibling;
        console.dir(bro2);
        //子のリストを取得
        let chList = document.querySelector(".base").children;
        console.dir(chList);
        //子の最初を取得
        let firCh = document.querySelector(".base").firstElementChild;
        console.dir(firCh);
        //最後の子を取得
        let lasCh = document.querySelector(".base").lastElementChild;
        console.dir(lasCh);
        //先祖を取得
        let anc = document.querySelector(".base").closest(".ancestor");
        console.dir(anc);
        //さらに先祖を取得
        let anc2 = document.querySelector(".base").closest("body");
        console.dir(anc2);
    </script>
</body>