1. はじめに
本記事では、JavaScript DOM操作の「DOM操作の演習」について記載する。
2. 演習の内容
「ノードの追加」(下記リンク先)で記述したコードの改修。
3. 演習の条件
演習を進めていくにあたって、条件を以下に記載する。
ユーザーがテキストボックスに文字列を入力後にボタンをクリックすると、リストの最後の項目として文字列が追加されるプログラムを記述する。
上記条件に付随して、以下補足を記載しておく。
テキストボックスの要素を取得するには、getElementByIdメソッドを利用できる。
4. 実践
マークアップデータの改修
まずはじめに、過去に記述したマークアップデータを改修していく。
改修前
前回のマークアップデータは下記の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists"></ul>
<input type="button" value="取得" onclick="append()" />
<script src="js/index.js"></script>
</body>
</html>
マークアップしブラウザで表示すると以下のようになる。
こちらを改修するにあたり、ポイントは以下の2つがある。
・テキストボックスの追加 ・input要素の各属性の修正
改修後
改修前に挙げたポイントを軸に、以下のように改修した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists"></ul>
<input id="textBox" type="text">
// ↑テキストボックスの追加
<input type="button" value="追加" onclick="append" />
// valueを「追加」に変更
<script src="js/index.js"></script>
</body>
</html>
改修したマークアップデータをブラウザで表示すると以下のようになる。
改修した結果、
・テキストボックスが追加されるようになった。 ・ボタンの表示を追加に変更した。
なおテキストボックスにidを振ってあるが、理由として
JavaScriptを記述するにあたって、 テキストボックスに振ったidを取得する必要があるため。
※詳細はJavaScriptで記述
JavaScriptデータの改修
次に、JavaScriptデータの改修を行っていく。
以前に記述したデータはこちらから。
改修前
前回のJavaScriptデータは下記の通り。
function append() {
let li = document.createElement('li');
let text = document.createTextNode('追加文字列');
li.appendChild(text);
lists.appendChild(li);
}
こちらを改修するにあたり、ポイントは以下の3つがある。
idがlistの要素にli要素を追加するする処理について、 getElementById を使って要素を取得して利用するコードの方が一般的 なので、その旨を追記する。
テキストボックスの要素を取得する構文を追加する。
テキストボックス内に追加する部分で「追加文字列」という決め打ちの文言を ブラウザ上で入力した文言を追加したい ので、文字列を書き換える処理を実施する。
改修後
改修前に挙げたポイントを軸に、以下のように改修した。
function append() {
let lists = document.getElementById('lists');
let textBox = document.getElementById('textBox');
let li = document.createElement('li');
let text = document.createTextNode(textBox.value);
li.appendChild(text);
lists.appendChild(li);
}
改修した内容としては、
idがlistの要素にli要素を追加するする処理を、 getElementById を使って要素を取得するコード を追記した。
テキストボックスの要素を取得する構文を追加した。
テキストボックス内に追加する部分で、ブラウザ上で入力した文言を追加する処理 に書き換えた。
改修後の検証
改修したものをデベロッパーツールで検証すると、
検証の結果、
テキストボックスに文字列を記述してボタンをクリックすると、 ブラウザ上で文字列が表示され、かつli要素が追加されるようになった。