Element操作の2回目は、実際に作ったり、消したり、修正してみたいと思います。
前回行なった検索結果のElementを変更してみたり、新規にElementを作成したり、いらなくなったElementを削除する事を覚えると、Element操作の基礎は完了です。
レポート画面などにある、データ一覧を表示するtableタグなどの、表示順番の並びをボタン一つで変更したり、formタグで記入してもらったrecordデータをtableに追加したり、削除したりというこの手の作業ができるようになります。
もちろん、WEBページにおけるインタラクティブな表示方式なども同じ手順で行う事が可能ですよ。
作成
新たなElementを作り出しす命令ですが、これ一つなので覚えておくと便利に使えます。
createElement
// Elementの作成
var div = document.createElement("div");
// IDの付与
div.id = "sample-id";
// class値の付与
div.className = "sample-class";
// 属性の付与
div.setAttribute("data-attribute" , "sample-attribute");
// 内容の書き込み
div.innerHTML = "<a href='http://google.com'>Google</a>";
// bodyタグに追加
document.body.appendChild(div);
コメントで解説を書いておいたので、雛形として使えるようにしています。
classやidの付与は、setAttributeでも行えるので、記述を統一したい場合は、どちらの方法で行なってもかまいません。
内容の書き込みはタグを有効にしたい場合は、innerHTMLで、文字列としてのみの書き込みは、textContentを使って書き込んでください。
作成したElementをbodyタグに追加していますが、追加したいElementがある場合は、前回行なった検索で取得したElementにたいしてappendChildしましょう。
削除
removeChild
いらなくなったElementを削除するときは、この命令一つで削除できます。
削除したElementに内包するElement全てが削除されてしまいますので、DOM構造を理解して行いましょう。
// 削除するElementを検索
var target = document.getElementById("sample-id");
// Elementを削除
target.parentNode.removeChild(target);
先ほど作ったdiv要素を削除してみました。
検索したものを削除するだけですが、removeChildの手前のparentNodeは、親Elementを指定しています。
対象のelementを削除するのではなく、removeChildという命令でわかる通り、子要素を削除する命令です。
その為、一度親要素も取得する必要があるんですが、対象のelementの親をしていするこのやり方を使えばいいだけなので、わざわざ親要素を個別に選択する必要はありません。
追加・修正
上記作成の時に出てきたappendChildの他にもElementを追加する命令がいくつかあるので覚えておくと便利ですよ。
appendChild
親要素直下の一番最後に追加されます。
<ol id="sample-list">
<li>list-1</li>
<li>list-2</li>
</ol>
--[javascript]--
// 親要素の検索
var ol = document.getElementById("sample-list");
var li = document.createElement("li");
li.textContent = "list-3";
//追加
ol.appendChild(li);
--[/javascript]--
> result
<ol id="sample-list">
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ol>
insertBefore
指定項目の直前に追加されます。
<ol id="sample-list">
<li>list-1</li>
<li>list-2</li>
</ol>
--[javascript]--
// 親要素の検索
var ol = document.getElementById("sample-list");
var li = document.createElement("li");
li.textContent = "list-0";
//追加
ol.insertBefore(li , ol.childNodes[0]);
--[/javascript]--
> result
<ol id="sample-list">
<li>list-0</li>
<li>list-1</li>
<li>list-2</li>
</ol>
親要素.insertBefore(追加する要素 , 追加する項目の起点となる要素※この項目の手前に追加されます);
replaceChild
要素を入れ替えられます。
<ol id="sample-list">
<li>list-1</li>
<li>list-2</li>
</ol>
--[javascript]--
// 親要素の検索
var ol = document.getElementById("sample-list");
var li = document.createElement("li");
li.textContent = "list-10";
//追加
ol.replaceChild(li , ol.childNodes[1]);
--[/javascript]--
> result
<ol id="sample-list">
<li>list-0</li>
<li>list-10</li>
</ol>
親要素.insertBefore(追加する要素 , 追加する項目の起点となる要素※この項目と入れ替えられます);
学習中の人に向けて
いかがでしたか？HTMLのタグ操作をjavascriptで行う方法が分かったと思います。
学習過程のエンジニアの人はこの工程でWEBページの仕組みがわかる人も多いようです。
実際に柔軟にElement操作ができるようになると、WEBアプリケーションの構築の表示部分は大体行えるようになりますが、この後の学習としてUI/UXという、どのようなHTML構造、表示方式が利用ユーザーにとって使いやすいかという事が必要になります。
まあ、この辺は経験値で貯めていく人が多いので実行あるのみなんですけどね。
「jQueryを使えば簡単にできる」と言っている人で、こうしたネイティブコードを知らない人も意外と多いようです。
仕事の現場でそういう人がいたら、周囲のエンジニアが非常にかわいそうな目で見ている事が多いので、できればこうした基本コードは覚えておいた方がいいでしょうね。
