この記事ではJavaScriptのchildrenプロパティを使って子要素を取得していきます。
サンプルのコードも紹介します。
childrenプロパティ
サンプルコード
下記のソースコードで<div id="frame">の子要素をchildrenによって取得します。
<div id="frame">
<h2>議事録</h2>
<ul id="list">
<li>Aについて</li>
<li>Bについて</li>
<li>Cについて</li>
</ul>
<p>以上です。</p>
</div>var frame = document.getElementById('frame');
var frame_children = frame.children;
console.log(frame_children);
for (var i = 0; i < frame_children.length; i++) {
console.log(frame_children[i]);
}// console.log
// frame_childrenの結果
[h2, ul#list, p]
// frame_children[i]でループを回した結果
<h2>
<ul id="list">
<p>children[0]のように記載することで、個別の要素を取得できます。
childrenは「htmlタグの要素」が取得できるのがchildNodesとの違いです。
