https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/you-can-get-child-elements-with-javascript-using-the-children-firstelementchild-lastelementchild-properties/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/you-can-get-child-elements-with-javascript-using-the-children-firstelementchild-lastelementchild-properties/

JavaScriptで子要素を取得することができる.children・firstElementChild・lastElementChildプロパティの使い方

特定要素の子要素を取得する3つのプロパティ

JavaScriptで特定要素の子要素を取得するには、下記の3つのプロパティを利用します。処理内容が微妙に異なるので、違いを押さえておくと良いでしょう。

プロパティ

プロパティ意味返り値
【親要素】.children【親要素】の子要素全て取得要素が格納されたオブジェクト(HTML Collection)
【親要素】.firstElementChild【親要素】の最初の【子要素】要素(Element)
【親要素】.lastElementChild【親要素】の最後の【子要素】要素(Element)
子要素を取得するプロパティ

サンプルコード

サンプルコードとして、【親要素】.childrenで子要素の文字列を書き換えるスクリプトを紹介します。

文字列が全てHello Worldになっていれば成功です。

Output
【親要素】.childrenのサンプル
  • 子要素1
  • 子要素2
  • 子要素3
Pug
#targetArea 【親要素】.childrenのサンプル
	ul#targetList
		li.list-item 子要素1
		li.list-item 子要素2
		li.list-item 子要素3
CSS
ul#targetList li {
	list-style-position:inside;
}
JavaScript
const targetList = document.getElementById('targetList');
const targetSelector = targetList.children;
const targetLength = targetSelector.length;

for (let index = 0; index < targetLength; index++ ) {
	targetSelector[index].textContent = 'Hello World';
}
インストラクター
コメント

コメントを残す