JavaScript

childrenで子要素を取得する【JavaScript】

この記事では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との違いです。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5