ノードとは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（要素３）から消える。