DOMライブラリを自作

ホームページでJavaScriptを使ってタグをちょっと書き換えるコード。

<p id="takoluka">たこルカは俺の嫁</p>
	:
	:

<script>
// 何かの処理中に
document.getElementById("takoluka").innerHTML = "ルカ姐さんも俺の嫁";
</script>

これを簡単に書きたい。

簡単な奴です。 こんな簡単な奴でも、使ってみると「なんで今までやらなかったんだよ＞俺」みたいになった（大笑い）。 日頃の工夫というか鍛錬は怠っちゃだめだと実感しました💦

"use strict";

const mytag = function (id) {
	this.id = id;
	Object.defineProperty(this, "v", {
		get: function () {
			return this.get();
		},
		set: function (val) {
			this.set(val);
		}
	});
	Object.defineProperty(this, "dom", {
		get: function () {
			return document.getElementById(this.id);
		},
	});
};

mytag.prototype.set = function (val) {
	let tag = document.getElementById(this.id);
	let nn = tag.nodeName;
	if ("INPUT" == nn) {
		nn = tag.type;
	}
	switch (nn) {
		case "DIV":
		case "P":
			tag.innerHTML = val;
			break;

		case "PROGRESS":
		case "text":
		case "number":
		case "password":
		case "button":
			tag.value = val;
			break;

		case "IMG":
			tag.src = val;
			break;

		default:
	}
};

mytag.prototype.get = function () {
	let tag = document.getElementById(this.id);
	let nn = tag.nodeName;
	if ("INPUT" == nn) {
		nn = tag.type;
	}
	let val;
	switch (nn) {
		case "DIV":
		case "P":
			val = tag.innerHTML;
			break;

		case "PROGRESS":
		case "text":
		case "number":
		case "password":
		case "SELECT":
		case "range":
			val = tag.value;
			break;

		case "checkbox":
			val = tag.checked ? 1 : 0;
			break;

		default:
	}

	return val;
};

mytag.prototype.clear = function () {
	let tag = document.getElementById(this.id);
	switch (tag.nodeName) {
		case "SELECT":
			while (tag.firstChild) {
				tag.removeChild(tag.firstChild);
			}
			break;

		default:
	}
};

mytag.prototype.append = function (text, val, selected) {
	let tag = document.getElementById(this.id);
	switch (tag.nodeName) {
		case "SELECT":
			let opt = document.createElement("option");
			opt.text = text;
			opt.value = val;
			opt.selected = selected;
			tag.appendChild(opt);
			break;

		default:
	}
};
mytag.prototype.addEventListener = function (event, func) {
	let tag = document.getElementById(this.id);

	switch (tag.nodeName) {
		case "SELECT":
			tag.addEventListener(event, func);
			break;

		default:
	}
};

mytag.prototype.options = function () {
	let tag = document.getElementById(this.id);
	let val;
	switch (tag.nodeName) {
		case "SELECT":
			val = tag.options;
			break;

		default:
	}
	return val;
};

mytag.prototype.disabled = function (disabled) {
	let tag = document.getElementById(this.id);
	let nn = tag.nodeName;
	if ("INPUT" == nn) {
		nn = tag.type;
	}
	switch (nn) {
		case "range":
		case "button":
		case "checkbox":
			tag.disabled = disabled;
			break;

		default:
	}
};

function mytag_auto() {
	let tag_list = document.querySelectorAll("div, p, progress, select, input, img, form");
	for (let tag of tag_list) {
		if ("" != tag.id) {
			window[tag.id] = new mytag(tag.id);
		}
	}

}

mytag_auto();

対象のタグにidを入れて、それらのタグよりも後でライブラリを呼びます。 変更処理ではidと同じ変数のプロパティvから出し入れします。

<!-- 変更したタグにid -->
<p id="takoluka">たこルカは俺の嫁</p>
<input type="button" onClick="change_takoluka();">

<!-- 最後にライブラリ呼び出し -->
<script src="/mydom.js"></script>

<!-- 変更するコード -->
<script>
function change_takoluka() {
	alert("変更前：" + takoluka.v);
	takoluka.v = "ルカ姐さんも俺の嫁";
}
</script>

上記と同じコードを使っているのでお試し下さい(スタイル足してます)。

たこルカは俺の嫁