背景

querySelectorAllなどで要素を取得する際、NodeListで取得され、そのままではforEachが使えなかった
→正確には使えるが、取得したテキストが一文化されてしまっていた
→配列に入れて、区切りたかった

参考記事

・Array.prototype.slice.call(arguments)とは
https://lealog.hateblo.jp/entry/2014/02/07/012014

手順

<ul id="test">
    <li>b</li>
    <li>c</li>
    <li>a</li>
</ul>
<button id="myButton">ソートする</button>

document.getElementById("myButton").onclick=mySort;
function mySort() {

    let myUL = document.getElementById('test');
    let myNodeList = myUL.getElementsByTagName('li')

    //ここでNodeListを配列化している
    var myArray = Array.prototype.slice.call(myNodeList)
    
    //sortロジックを設定
    function compareText(a, b) {
        if(a.textContent > b.textContent) {
            return 1
        } else if(a.textContent < b.textContent){
            return - 1 
        }
        return 0;
    }

    myArray.sort(compareText);
	
	//要素を消去後に追加
    for(let i = 0; i < myArray.length; i++) {
        myUL.appendChild(myUL.removeChild(myArray[i]))
    }
}

一言

sortロジックは癖があるので、以下を参照。
https://goma.pw/article/2015-11-18-0/

Array.prototype.slice.call()にかけることで、配列化できる。
これにより配列のメソッドが使えそう。
→ これまでできなかったソート機能が実装できるかもしれない。

ただし、元の配列を壊す破壊的メソッドについて確認すること。
→ sliceメソッドを使用 → 配列を複製しているので非破壊的？

疑問点

createElementせずに、なぜappendChildができるかを調べる