JavaScript要素の取得、並び替え

Question

JavaScriptで要素内の文字列がうまく取得できないので、解決法を教えていただけないでしょうか？

<div id="posts" class="row">
　　<div class="box">
        <div class="con">
            <p class="date">2019/06/06</p>
        </div>
    </div>
    <div class="box">
         <div class="con">
             <p class="date">2019/06/17</p>
         </div>
     </div>
     <div class="box">
         <div class="con">
             <p class="date">2019/10/06</p>
         </div>
     </div>
</div>

let posts = document.getElementById('posts');
let boxies = posts.getElementsByClassName('box');
let content = boxies[0].getElementsByClassName('date');
console.log(content.textContent, content.innerText);

としたのですが、undefindと出てしまいます。
日付を取得する方法はないでしょうか？

また、.box単位で日付順に並べ変える機能を実装したいと考えているのですが、なにか良い方法はないでしょうか？

Answer 1

試していないのでわかりませんが、
boxies[0].getElementsByClassName('date');で取得したオブジェクトも HTMLCollectionになっているのではないでしょうか？

content[0]とやってみたらどうでしょう？

.box単位で日付順に並べ変える機能

私が考えた道筋だけ示すと

以下のサイトを見てみると日付の昇順で並び替える関数があります。↓
https://infoteck-life.com/a0107-js-array-sort-date/#i

これを応用し、それぞれのcontentから日付をとりだして、日付をkeyにしてcontentをsortし、そこからそれぞれboxまでの親ノードを取得。class="row"内の要素を全削除したのち、最初のboxをappendchild、残りをinsertAfterしていけばいいのではないでしょうか？