JS勉強記⑩DOM操作の演習

2021年4月10日 16:39

演習

『JS勉強記⑦ノードの追加』を改修して、テキストボックスに入力した文字列が最後尾に追加されていく処理。

『ノードの追加』で作成したコードは下記の通り。

function append() {
 var li = document.createElement('li');
 var text = document.createTextNode('追加文字列');
 li.appendChild(text);
 lists.appendChild(li);
}

これを改修して下記の通り記述。HTMLのbodyは以下の通り。

<body>
 <ul id="lists">
 </ul>
 <input type="text" id="addtext">
 <input type="button" value="追加" onclick="append()">
 <script src="js/exercise.js"></script>
</body>

クリックした際の動作をappend関数と設定。
「テキストボックスに“もも”と入力して追加ボタンを押す」と仮定して、JSの動作を解説。JSは以下の通り。

function append() {
 const add = document.getElementById('addtext');　－①
 console.log(add.value);　－②
 const li = document.createElement('li');　－③
 const text = document.createTextNode(add.value)　－④
 console.log(text);　－⑤
 li.appendChild(text);　－⑥
 const lists = document.getElementById('lists');　－⑦
 lists.appendChild(li)　－⑧
}

①変数addを宣言し、getElementByIdメソッドでテキストボックスの要素を取得。
動作：テキストボックスに「もも」と入力されたinput要素を取り出した状態。
②コンソールに変数addにvalueプロパティを付けて（＝テキストボックスの内容を値として）を出力し、①のテキストボックスの内容が取得できているか一旦確認。
動作：コンソールに「もも」と表示されていればOK。この時点で「もも」はただの値なので、文字列でも属性でもない状態。後程この「もも」をテキストノード（＝文字列）に変換する。
③変数liを宣言し、createElementメソッドでli要素を生成。
動作：①で取得した「もも」を表示させるためのliタグの入れ物を作った状態。
④変数textを宣言し、①の要素を値として取り出しテキストノードに変換。
動作：①で取得した「もも」の書式を文字列に変換。②で言及した通り、この動作をしないとliタグの子要素として追加できない。（実際にliタグに突っ込みたいのは文字列としての「もも」なので）
⑤コンソールに変数textを出力し、④でテキストノードに変換した内容がテキストボックスの内容になっているか確認。
動作：コンソールに「"もも"」と表示されていればOK。②との違いは、ただの値だった「もも」が④の動作の影響で文字列の「"もも"」に変換された点。
⑥appendChildメソッドで変数liの子要素に変数textのテキストノードを追加。
動作：⑤で文字列になった「"もも"」を③で作ったliタグの中身として格納。これで<li>もも</li>が作られた状態。このliタグをulタグの子要素として突っ込む。
⑦変数listsを宣言し、getElementByIdメソッドでulタグを取得。
動作：⑥で作ったliタグを突っ込むためのulタグを取得。
⑧appendChildメソッドで変数lists（ulタグ）の子要素に変数liを追加。
動作：⑦で取得したulタグの子要素として⑥で作った<li>もも</li>を突っ込む。これでブラウザに「・もも」が表示される。

　②・⑤でコンソールに出力したのは、各工程で取り出したものが何なのか（オブジェクトなのかノードなのか）わからなかったから。
　②で取り出すものの指定を「add」と記述するとコンソールには「<input type="text" id="addtext">」と返ってくる。すなわち変数addはテキストボックスを生成しているinputタグそのものを指している。なのでテキストボックスに入力した内容を取り出したい場合はvalueプロパティを付ける必要がある。「add.value」はadd変数の中身を値として取り出したものなので、実際に入力された「もも」がコンソールに出力される。
　その上で⑤でtext変数の内容を取り出すと、④でadd.valueをテキストノード（＝文字列）に変換した「"もも"」がコンソールに出力される。

------------------------------------------------------------------------------------

　正直このレベルの演習なら今まで習ったパターンうちのどれかを当てはめれば正解することは簡単。しかしながら、そんなことしていると実践的な力はつかないので、面倒だけれども上記のような「自分の取り扱っている変数の中身の確認作業」が必要になってくると思う。

この記事が気に入ったらサポートをしてみませんか？