jQueryのcontents()をJavaScriptで実装した代替サンプルコード

2023-07-29

jQueryのcontents()メソッドは、要素の子孫ノード（テキストノード、コメントノード、要素ノードなど）を含むすべての子ノードを取得します。JavaScriptで同様の機能を実装するには、以下のようなコードを使用できます。

function getContents(element) {
	var contents = [];
	var childNodes = element.childNodes;

	for (var i = 0; i < childNodes.length; i++) {
	var node = childNodes[i];
	if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE || node.nodeType === Node.ELEMENT_NODE) {
		contents.push(node);
	}
	}

	return contents;
}

このgetContents関数は、指定された要素の子孫ノードを取得し、テキストノード、コメントノード、要素ノードを含むすべての子ノードを配列として返します。

使用例として、以下のように要素を取得してgetContents関数を呼び出すことができます:

var element = document.getElementById('myElement');
var childNodes = getContents(element);

for (var i = 0; i < childNodes.length; i++) {
	console.log(childNodes[i]);
}

上記の例では、myElementというIDを持つ要素の子孫ノードを取得し、コンソールに出力しています。