JavaScriptを初めて学ぶ5 #JavaScript

ノードとはHTML上ではエレメントとかタグを指す。<bodyとか、<sectionとか、<pとか。
そのノードを追加する方法があるので学んでいく

・createTextNode
テキストノードを作成する→document.createTextNode(text)

と

・appendChild
指定された要素をその場所の要素の最後の子要素として追加。（DOMツリー上で下）
element.appendChild(node(追加する子ノード))
戻り値は追加した子ノードの値

例えば

...
<body>
    <ul id="list">
    </ul>
    <input id="button" type="button" value="add">
    <script src="main.js"></script>
</body>

空の何も表示されてないリストとaddボタンがweb上で表示されてる。
じゃあノードをjavascriptで追加していこう↓

const e = document.getElementById('button'); 
e.addEventListener('click', () => {  
    const l = document.createElement('li'); //定数l=liを作成
    const addsuru= document.createTextNode('リスト作成！'); //定数addsuru=ノードのテキスト作成
    l.appendChild(addsuru); // liタグの要素にテキストaddsuruを追加
    const listElement = document.getElementById('list'); //定数listElement＝ idがlistに、liタグを追加
    listElement.appendChild(l); //<li>リスト作成！</li>が追加される

}, false);

少しややこしいけど、ボタンを押すと↓
最初に定数lでliタグ作成。次に定数addsuruでタグ内のテキスト作成（リスト作成！）
んで、l.appendChild(addsuru)で、lの中にaddsuruを入れる。つまりここで

リスト作成！ができる。
そして定数listElement=listのidをゲット。つまりulのノード
最後にlistElement.appendchild(l)で<ulの中に、l=<liリスト作成！</liを入れる。
ul　→ li → テキストを、appendChildで入れる感じ。子から子へ。

また、ノードを入れ替える方法
・replaceChild
指定した子ノードを置き換える→ replaceNode= parentNode.replaceChild(newChild.oldChild)
parentNode=置き換え対象の親ノード
newChild=置き換え後のノード
oldChild=置き換え対象のノード
replaceNode=置き換えられたノード

例えば

...
<body>
    <ul>
        <li id="oldList">古い要素</li>
    </ul>
    <input id="button" type="button" value="置き換え">
    <script src="main.js"></script>
</body>

で、WEB上ではボタンと古い要素、というテキストが表示
JavaScriptで↓

const e = document.getElementById('button'); 
e.addEventListener('click', () => {  
    const newOne = document.createElement('li'); //定数newlist=liノードを作成
    newOne.setAttribute('id','newList'); //newlist=liノードにid属性newListをつける
    const newText=document.createTextNode('新しい要素'); //テキストノードを作成
    newOne.appendChild(newText); //作成したノードを空の子要素として追加。<li id=newList>のとこに追加てこと
    const oldOne=document.getElementById('oldList'); //oldOne=id=oldListのとこゲット
    const parentNode=oldOne.parentNode; //parentNode=oldListはこれから置き換え対象の親ノードですよ
    parentNode.replaceChild(newOne,oldOne); //parentNodeはoldListからnewListに置き換わる
}, false);

すると、ボタンを押すと「古い要素」→「新しい要素」に置き換わる。
最初に

新しい要素と言う置き換えたいノードを作って
次に古い要素をゲット
そしたらあとは、const parent=oldOne.parentNode;と言う親ノードを作って
parentNode.replaceChild(newOne, OldOne);で置き換える

また、ノードを削除する方法
・removeChild
指定した子ノードを取り除く→oldChild=element.removeChild(child)
child=取り除く子ノード
oldChild=取り除かれた子ノードの参照（参照とは、オブジェクトが存在している場所を指し示すもの）
取り除いたノードoldChildは再利用可能

<body>
    <ul id="list">
        <li>要素１</li>
        <li>要素2</li>
        <li>要素3</li>
        <li>要素4</li>
        <li>要素5</li>
    </ul>
    <input id="button" type="button" value="削除！">
    <script src="main.js"></script>
</body>

要素１、２、３、４、５のリストと削除ボタンがweb上に表示。

const e = document.getElementById('button'); 
e.addEventListener('click', () => {  
    const parentElement = document.getElementById('list'); //id="list"の要素をゲット。つまり親ノード
    const elements = parentElement.getElementsByTagName('li'); //liタグの要素をゲット。つまり子ノード
    const removeIndex = elements.length -3; //定数elements内の中から削除するインデックス番号をゲット
    parentElement.removeChild(elements[removeIndex]); //親ノード内のエレメントを消してく
}, false);

elements.length(1~５あるよ)　- 1
で実行すると、要素５から消える。なぜ？？
もし、−１がなかったら、elements.lengthの5から消すことになる。
配列のインデックスは０から始まるので、5はなく、4（要素５）までしかない。
なので−１をして、4（要素５）から消せるようにしている。
だからもし-3とかにしたら、2（要素３）から消える。