モダンJavaScript入門: DOM操作

JavaScriptを使ってウェブページを動的に変更するためには、DOM（Document Object Model）の理解と操作が必要不可欠です。この記事では、DOM操作について詳しく解説し、それぞれの特徴と使用方法を具体的なコード例とともに説明します。

DOMとは?

DOMはDocument Object Modelの略で、HTMLやXML文書のプログラム的なインターフェースです。DOMを使うと、プログラムからHTMLの要素を操作したり、要素にイベントを割り当てたりすることができます。

// HTML文書のbody要素を取得
var body = document.body;

要素の選択

DOM操作の基本は、操作したいHTML要素を選択することです。要素の選択にはquerySelectorやgetElementByIdなどのメソッドが使用されます。

// idが'myElement'の要素を選択
var element = document.getElementById('myElement');

// classが'myClass'の要素を全て選択
var elements = document.getElementsByClassName('myClass');

要素の作成と追加

新しいHTML要素の作成と、それをDOMに追加する方法も重要です。これにはcreateElementとappendChildメソッドが使用されます。

// 新しい<div>要素の作成
var newElement = document.createElement('div');

// 作成した要素をbody要素の最後に追加
document.body.appendChild(newElement);

要素の削除

DOMから要素を削除するには、removeChildメソッドを使用します。このメソッドは親要素から呼び出し、引数に削除する子要素を指定します。

// idが'myElement'の要素を削除
var element = document.getElementById('myElement');
element.parentNode.removeChild(element);

属性の操作

要素の属性（例えば、idやclass）を操作するには、getAttribute、setAttribute、removeAttributeメソッドを使用します。

// id属性を取得
var id = element.getAttribute('id');

// class属性を設定
element.setAttribute('class', 'myClass');

// id属性を削除
element.removeAttribute('id');

スタイルの操作

要素のスタイルを操作するには、要素のstyleプロパティを使用します。このプロパティはCSSプロパティをキャメルケースで表現したオブジェクトです。

// 背景色を赤に設定
element.style.backgroundColor = 'red';

// フォントサイズを大きくする
element.style.fontSize = '24px';

これらの基本的な操作を理解すれば、JavaScriptを使ってHTML文書を動的に変更することができます。DOM操作はウェブ開発における重要なスキルなので、ぜひマスターしてください。

AIko Code Symphony