JavaScriptで要素の属性を操作する方法を完全解説！初心者でもわかるDOM操作入門

1. JavaScriptのDOM操作と属性とは？

1. JavaScriptのDOM操作と属性とは？

JavaScriptのDOM操作とは、Webページに表示されているHTMLを、JavaScriptを使って動的に変更することです。DOMとは「Document Object Model」の略で、Webページを木のような構造として扱う仕組みを指します。

属性とは、HTMLタグの中に書かれている追加の情報です。たとえば、画像を表示するimgタグには、どの画像を表示するかを指定するsrc属性があります。これは「この画像を使ってください」という指示書のようなものです。

パソコンにたとえると、HTML要素は家、属性はその家の住所や色、名前のような情報だと考えるとわかりやすいです。

2. getAttributeで属性を取得する方法

2. getAttributeで属性を取得する方法

getAttributeは、HTML要素に設定されている属性の値を取得するための命令です。命令とは、JavaScriptに「これをして」とお願いするための書き方です。

たとえば、画像のファイル名を知りたいときに使います。まずはHTMLを見てみましょう。

<img id="sampleImage" src="sample.png" alt="サンプル画像">

この画像のsrc属性をJavaScriptで取り出します。

const img = document.getElementById("sampleImage");
const srcValue = img.getAttribute("src");
console.log(srcValue);

実行すると、次のように表示されます。

sample.png

このように、getAttributeを使うと、HTMLに書かれている情報をそのまま読み取ることができます。

3. setAttributeで属性を変更する方法

3. setAttributeで属性を変更する方法

setAttributeは、HTML要素の属性を変更したり、新しく設定したりするための命令です。これは「内容を書き換える」イメージです。

たとえば、ボタンを押したら画像を別のものに変えたい場合に使います。

const img = document.getElementById("sampleImage");
img.setAttribute("src", "changed.png");

このコードを実行すると、画面に表示されている画像がchanged.pngに切り替わります。紙に書いた文字を消して、新しい文字を書くような感覚です。

4. 属性を削除するremoveAttribute

4. 属性を削除するremoveAttribute

removeAttributeは、属性そのものを削除するための命令です。たとえば、画像の説明文であるalt属性を消したいときに使います。

const img = document.getElementById("sampleImage");
img.removeAttribute("alt");

これにより、alt属性がHTMLからなくなります。不要になった付せんをはがすようなイメージです。

5. 属性操作がよく使われる場面

5. 属性操作がよく使われる場面

JavaScriptで属性を操作する方法は、実際のWebサイトでとてもよく使われます。たとえば、リンク先を変更する、入力欄を使えない状態にする、ボタンを押せなくするなどです。

これらはすべて、HTMLの属性をJavaScriptで変更することで実現しています。難しそうに見えますが、基本は「取得する」「変更する」「削除する」の三つだけです。

プログラミング未経験の方でも、この考え方を理解できれば、Webページが動く仕組みが少しずつ見えてきます。