jQueryのchildren()をJavaScriptで実装するサンプルコード

2023-07-27

jQueryのchildren()メソッドは、指定した要素の直下にある子要素を取得します。JavaScriptで同様の機能を実装するには、次のようなサンプルコードを使用することができます。

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

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

	if (child.nodeType === Node.ELEMENT_NODE) {
		children.push(child);
	}
	}

	return children;
}

このchildren()関数は、引数としてDOM要素を受け取り、その直下にある子要素の配列を返します。element.childNodesを使用して要素の子ノードを取得し、nodeTypeがNode.ELEMENT_NODE（要素ノード）である場合にのみ配列に追加します。

このサンプルコードを使用すると、次のようにして要素の直下の子要素を取得できます：

var parentElement = document.getElementById('parent');
var childrenArray = children(parentElement);

console.log(childrenArray);

上記のコードでは、parentElement変数に親要素のDOM要素を取得し、children()関数を呼び出してその子要素を取得し、結果をchildrenArrayに格納しています。取得した子要素の配列は、console.log()を使用してコンソールに出力されます。