HTML要素.children / firstElementChild / lastElementChild

// 子要素の一覧を取得します。
var elements = element.children;

// 最初の子要素を取得します。
var first = element.firstElementChild;

// 最後の子要素を取得します。
var last = element.lastElementChild;

sample_children.html

<ul id="members">
	<li>岡部倫太郎</li>
	<li>牧瀬紅莉栖</li>
	<li>椎名まゆり</li>
	<li>橋田至</li>
</ul>

sample_children.js

var members = document.getElementById("members");

// パターン1: childrenで子要素の数と一覧を確認する
console.log(members.children.length); // 『4』と出力されます。

// パターン2: インデックスで特定の子要素を取得する
console.log(members.children[0].textContent); // 『岡部倫太郎』と出力されます。
console.log(members.children[3].textContent); // 『橋田至』と出力されます。

// パターン3: childNodesはテキストノードも含むため数が多くなる
console.log(members.childNodes.length); // 『9』と出力されます（タグ間の改行もカウントされます）。

// パターン4: firstElementChild / lastElementChild でHTML要素を確実に取得する
console.log(members.firstElementChild.textContent); // 『岡部倫太郎』と出力されます。
console.log(members.lastElementChild.textContent);  // 『橋田至』と出力されます。

// パターン5: ループですべての子要素を処理する
for (var i = 0; i < members.children.length; i++) {
	console.log((i + 1) + ": " + members.children[i].textContent);
}
// 『1: 岡部倫太郎』『2: 牧瀬紅莉栖』『3: 椎名まゆり』『4: 橋田至』と順番に出力されます。

サンプルページはこちら

『HTML要素.children』はHTML要素のみの子要素をHTMLCollectionとして返すプロパティです。『HTML要素.childNodes』はテキストノードやコメントノードも含むすべての子ノードを返すため、通常のDOM操作ではHTML要素だけを扱う『HTML要素.children』を使う方が予期しない結果を防げます。

HTMLのソースコードでは、タグとタグの間にある改行やインデントの空白もテキストノードとして扱われます。そのため『childNodes』や『firstChild』『lastChild』を使うと、空白のテキストノードが取得されてしまう場合があります。HTML要素だけを確実に取得したい場合は『children』『firstElementChild』『lastElementChild』を使用してください。

子要素の数を数えたい場合は『children.length』で取得できます。特定の条件に一致する子要素を探したい場合は『HTML要素.querySelector()』や『HTML要素.querySelectorAll()』の方が便利です。