javascriptでページ内のHTML構造の変更やタグの削除 DOMの利用(6)

By | 2016年11月25日

前回javascriptDOM を操作してHTMLタグを動的にページ内に追加する方法について紹介しました。

今回はページ内のタグの構造(DOMツリー)を変更したり、タグをページから削除したりする方法を紹介します。

タグの位置を変更するサンプル

既にページ内に存在するタグを移動させてDOMツリーを変更するサンプルです。

タグの移動は、前回のタグの挿入時に使用したメソッド appendChildinsertBefore で行えます。

appendChildを使ったサンプルソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>DOMによるHTMLタグの移動</title>
</head>

<style>
	#party {
		width: 300px;
		height: 300px;
		background-color: #fdd;
	}
</style>

<body>

	<p id="moved">仲間になりたそうな敵</p>

	<div id="party">
		<p>仲間1</p>
	</div>

	<button id="moveButton">仲間に加える</button>

</body>

<script>

	// タグを移動するボタン
	var moveButton = document.getElementById("moveButton");

	// ボタンをクリックした時の処理
	moveButton.addEventListener("click", function() {

		// 移動させる要素
		var target = document.getElementById("moved");

		// 移動後に親となる要素
		var party = document.getElementById("party");

		// タグの移動
		party.appendChild(target);
	}, false);

</script>

</html>

サンプルの実行結果

ボタンを押すと、bodyタグの子要素だったpタグが、divタグの子要素となります。

appendChildによるDOMツリーの変更、タグの移動

「仲間になりたそうな敵」がパーティーに加わりました。

insertBeforeを使ったサンプルソースコード

class属性に「companions」を持っている複数の要素を for...of のループで一気に移動させるサンプルです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>DOMによるHTMLタグの移動</title>
</head>

<style>
	#party {
		width: 300px;
		height: 300px;
		background-color: #fdd;
	}
</style>

<body>

	<div id="party">
		<p class="companions">仲間1</p>
		<p class="companions">仲間2</p>
		<p class="companions">仲間3</p>
		<p class="companions">仲間4</p>
		<p class="companions">仲間5</p>
		<p class="companions">仲間6</p>
	</div>
	<button id="moveButton">解散</button>
</body>

<script>

	// タグを移動するボタン
	var moveButton = document.getElementById("moveButton");

	// ボタンをクリックした時の処理
	moveButton.addEventListener("click", function() {

		// 移動させる全ての要素(class属性に companions を持つ要素)
		var target = document.getElementsByClassName("companions");

		// 現在の親要素
		var party = document.getElementById("party");

		// 移動後に親となる要素
		var body = document.getElementsByTagName("body")[0];

		// 配列 target に含まれる全ての要素に対して以下の処理を実行

		for (let companion of target) {
			// テキスト変更
			companion.innerHTML = "失業";
			// タグの移動
			body.insertBefore(companion, party);
		}

	}, false);

</script>

</html>

サンプルの実行結果

ボタンを押すと、複数の要素が一度に移動します。

insertBeforeによるDOMツリーの変更、タグの移動

このように、タグの移動は追加と同じメソッドを使って行うことができます。

DOMツリーから要素を削除

ページ内からタグを削除するサンプルです。

サンプルソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>DOMによるHTMLタグの削除</title>
</head>

<style>
	#party {
		width: 300px;
		height: 300px;
		background-color: #fdd;
	}
</style>

<body>

	<div id="party">
		<p class="companions">仲間1</p>
		<p class="companions">仲間2</p>
		<p class="companions">仲間3</p>
		<p class="companions">仲間4</p>
		<p class="companions">仲間5</p>
		<p class="companions">仲間6</p>
	</div>
	<button id="moveButton">削除</button>
</body>

<script>

	// タグを移動するボタン
	var moveButton = document.getElementById("moveButton");

	// ボタンをクリックした時の処理
	moveButton.addEventListener("click", function() {

		// 削除対象の要素
		var party = document.getElementById("party");

		// 削除対象の親要素
		var body = document.getElementsByTagName("body")[0];

		body.removeChild(party);

	}, false);

</script>

</html>

サンプル実行結果

removeChildでDOMツリーからタグを削除

削除する要素に子要素がある場合は、それも一緒に削除されます。

要素を削除するメソッド removeChild

サンプルのように、DOMツリーから要素を削除する場合は、メソッド removeChild を使います。

親要素.removeChild(削除する要素)

メソッドの名前の通り、子要素ではない要素は削除できません。

また、removeChild によって削除された要素は、ページのDOMツリーからは削除されますが、厳密には完全に削除されていません。あとで再利用することもできます。

取り除かれた子ノードはしばらくは記憶領域上に残りますが、もう DOM の一部ではありません。取り除いたノードは、oldChild オブジェクト参照を通じて、コード中で後で再利用することができます。
Node.removeChild - Web API インターフェイス | MDN

以上がjavascriptでページのHTMLタグの構造の変更および削除を行う方法です。

javascriptでページ内のHTML構造の変更やタグの削除 DOMの利用(6)」への1件のフィードバック

  1. ピンバック: jQueryを使ったHTMLタグ構造の変更 DOMの利用(7) | JoyPlotドキュメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です