DOM操作の基本：要素の取得と変更 – JavaScriptで始めるプログラミング
JavaScriptを使ってウェブページを動的に操作するためには、DOM（Document Object Model）の知識が必要です。本記事では、最も基本的なDOM操作である要素の取得と変更について解説します。
要素の取得
まず最初に、DOMから特定の要素を取得する方法を学びましょう。以下にいくつかの方法を紹介します。
- getElementById：特定のIDを持つ要素を取得します。
- getElementsByClassName：特定のクラス名を持つ全ての要素を取得します。
- querySelector：指定したCSSセレクタに一致する最初の要素を取得します。
- querySelectorAll：指定したCSSセレクタに一致する全ての要素を取得します。
サンプルコード
// IDで要素を取得 const elemById = document.getElementById('sampleId'); // クラス名で要素を取得 const elemsByClass = document.getElementsByClassName('sampleClass'); // CSSセレクタで最初の要素を取得 const firstElemBySelector = document.querySelector('.sampleClass'); // CSSセレクタで全ての要素を取得 const allElemsBySelector = document.querySelectorAll('.sampleClass');要素の変更
次に、取得した要素をどのように変更するかについて説明します。変更方法としては、テキスト内容の変更、属性の変更、スタイルの変更などがあります。
テキスト内容の変更
textContentプロパティを使うと、要素のテキスト内容を変更できます。
// テキスト内容を変更 elemById.textContent = '新しいテキスト';属性の変更
setAttributeメソッドを使うと、要素の属性を変更することができます。例えば、リンクのhref属性を変更する場合、以下のようになります。
// 属性を変更 elemById.setAttribute('href', 'https://www.example.com');スタイルの変更
要素のスタイルを変更するためには、styleプロパティを使います。たとえば、背景色を変更する場合、次のようにします。
// スタイルを変更 elemById.style.backgroundColor = 'blue';まとめ
以上がJavaScriptを使ったDOM操作の基本です。要素の取得から変更まで、これらの知識を活用することで、よりインタラクティブなウェブページを作成することができるようになります。さらに、より高度な操作を学ぶことで、ウェブ開発のスキルを向上させることができます。
