JavaScriptの.childrenで指定要素の子要素にclass名を一括付与

要素が階層になっている「親要素・子要素・孫要素」で、JavaScriptを使って子要素に一括でclass名を付与します。

こんな時、.children プロパティが便利です。

是非、最後までご覧いただけたら嬉しいです。

.children

JavaScriptの.children は、 HTMLCollection で呼び出された要素の子要素をすべて返す読み取り専用のプロパティです。

var element    = document.getElementById('parentObj'),
childElems = element.children;

ボタンクリックで子要素にclass名を一括付与するサンプル

早速サンプルです。

ボタンをクリックすると、子要素のclass名に「childclass」が付与されます。付与されると、font-weight:600; になるようにしているので、対象のものは全て太字になります。

サンプルでは、切り替えに準じた見た目の変更をご覧いただきました。実際のHTMLの変化については、変更前後を交え以下をご覧ください。

子要素にclass名が追加される前のHTML

まずは、JavaScriptでclass名を追加する前のHTMLです。「parentObj」のid名を持つ親要素に、p タグ・ul タグの子要素があります。

<div id="parentObj">
<p>子階層その1</p>
<p>子階層その2</p>
<p>子階層その3</p>
<ul>
  <li>liタグその1</li>
  <li>liタグその2</li>
</ul>
</div>

子要素にclass名が追加された後のHTML

この記事のサンプルにあるボタンをクリックすると、子要素のp タグ・ul タグの全てに「childclass」が付与されます。

<div id="parentObj">
<p class="childclass">子階層その1</p>
<p class="childclass">子階層その2</p>
<p class="childclass">子階層その3</p>
<ul class="childclass">
  <li>liタグその1</li>
  <li>liタグその2</li>
</ul>
</div>

かかかず

ちなみに孫要素の li タグに「childclass」のclass名は付与されないです。

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説します。

<div id="parentObj">
<p>子階層その1</p>
<p>子階層その2</p>
<p>子階層その3</p>
<ul>
  <li>liタグその1</li>
  <li>liタグその2</li>
</ul>
</div>

var element    = document.getElementById('parentObj'),
childElems = element.children;

for (var i = 0, len = childElems.length; i < len; i++) {
    childElems[i].classList.add("childclass");
};
console.log(childElems);

ざっくりとしたコードの解説

コードはHTMLとJavaScriptの2種類です。この記事のスニペットでは、見た目をさほどいじっていないので、CSSは割愛させてください。

HTML

HTMLは、「parentObj」のid名を持つ親要素に、p タグ・ul タグの子要素がある構造です。

<div id="parentObj">
<p>子階層その1</p>
<p>子階層その2</p>
<p>子階層その3</p>
<ul>
  <li>liタグその1</li>
  <li>liタグその2</li>
</ul>
</div>

先ほどのサンプルで出てきたコードと一緒です。

JavaScript

JavaScriptは、大枠で言うと「子要素を取得」と「ループで子要素全てにclassを付与」の2つです。

// 指定の親要素を取得
var element    = document.getElementById('parentObj'),
// 指定した親要素の子要素を全て取得
childElems = element.children;

// 取得した子要素をループで回す
for (var i = 0, len = childElems.length; i < len; i++) {
    // 子要素全てにclassを付与
    childElems[i].classList.add("childclass");
};

// コンソールログ
console.log(childElems);

.children で子要素を取得してくれるので、非常に簡単なコードでできています。

かかかず

コード全体は、雰囲気でも理解しやすいシンプルな構造です。

さいごに

.children は読み取り専用のプロパティなので、利用が限定的になるかもしれませんが、このプロパティで一括取得できるので、カスタマイズして使えば非常に便利なものになりそうです。

是非カスタマイズするなどして使ってみてください。