HTML要素.children / firstElementChild / lastElementChild対応: DOM Level 1（1998）

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

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

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

<ul id="list">
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ul>

var list = document.querySelector("#list");

// children でHTML要素のみの子要素一覧を取得します。
console.log(list.children.length); // 『3』と出力されます。
console.log(list.children[0].textContent); // 『項目1』と出力されます。
console.log(list.children[2].textContent); // 『項目3』と出力されます。

// childNodes はテキストノードも含むため数が異なります。
console.log(list.childNodes.length); // 『7』と出力されます。タグ間の空白もテキストノードとして数えられます。

// 最初と最後の子要素を取得します。
console.log(list.firstElementChild.textContent); // 『項目1』と出力されます。
console.log(list.lastElementChild.textContent); // 『項目3』と出力されます。

// firstChild はテキストノードが返される場合があります。
console.log(list.firstChild); // 改行と空白のテキストノードが返されます。

list.children.length;                    // 3
list.children[0].textContent;            // 項目1
list.children[2].textContent;            // 項目3
list.childNodes.length;                  // 7
list.firstElementChild.textContent;      // 項目1
list.lastElementChild.textContent;       // 項目3

『children』はHTML要素のみ3つを返しますが、『childNodes』はタグ間の空白テキストノード4つを含めた7つを返します。

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

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

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