更新日:
【JavaScript】 DOMをマスターしよう！
DOMはWebページの各要素にアクセスし、それらを自由に操作するための仕組みです。
DOMとは
DOMは「Document Object Model」の略で、Webページの各要素にアクセスし、それらをオブジェクトとして自由に操作するための仕組みです。DOMを使うことで、以下のことが可能になります。
Webページの要素を取得・操作する
特定の要素の色を変更したり、テキスト内容を書き換えたり、要素を追加・削除したりすることができます。イベント処理を行う
ボタンクリックやマウス操作などのイベントを検知し、それに応じた処理を実行することができます。動的なWebページを作成する
ユーザーの操作に応じてWebページの内容を変化させたり、アニメーションを動かしたりすることができます。
DOMツリーとは
HTMLはツリー構造を持っています。ツリーの頂点には<html>タグがあり、その下に<head>タグと<body>タグが続きます。さらにその下に、それぞれの子要素が階層的に並んでいます。このようなツリー構造を「DOMツリー」と呼びます。
例として、以下のようなHTMLを考えてみましょう。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>DOMの例</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはDOMの例です。</p>
</body>
</html>
このHTMLは以下のようなDOMツリーになります。
1
2
3
4
5
6
7
8
9
html
├── head
│ └── title
│ └── DOMの例
└── body
├── h1
│ └── こんにちは！
└── p
└── これはDOMの例です。
このツリー構造をjavaScriptを使って操作することで、Webページの内容や構造を動的に変更することができます。
ノードとは
DOMはノードと呼ばれる要素で構成されています。ノードには以下のような種類があります。
- 要素ノード： HTMLタグに対応するノード。
h1、p、divなどの要素が該当 - 属性ノード： 要素ノードに付与される属性に対応するノード。
href、id、classなどの属性が該当 - テキストノード： 要素ノード内に含まれるテキストデータに対応するノード
これらのノードは、先ほどのDOMツリーとして階層構造で組織化されています。この階層構造のことをドキュメントツリーと呼びます。ドキュメントツリーの最上位にはDocumentノードがあり、その下には要素ノード、属性ノード、テキストノードなどが配置されています。
イベントハンドリング
DOMを指定するとその要素に対してクリックなど何らかのイベントが行われた時、指定した処理を実行することができるようになります。それを実現するのがaddEventListenerメソッドです。このメソッドを使うことで要素を自由に操作することができます。
DOM操作で役立つオブジェクト
JavaScriptには配列を作成するArrayオブジェクトや日付などに関する情報を操作できるDateオブジェクトなどが最初から用意されています。その最初から用意されているオブジェクトの中にはDOM操作をする上で便利なものがあります。
documentオブジェクト
documentオブジェクトは、Webページ全体の内容を持つオブジェクトです。このオブジェクトにはHTMLソースコードに書かれている全ての要素やテキストが含まれています。documentオブジェクトを使うことで、ページの各要素にアクセスして、それらを操作することができます。
検証モードでコンソールにdocumentと入力すると以下のようにソースコードが入っているのが確認できます。
windowオブジェクト
windowオブジェクトは、ブラウザ全体の機能や情報にアクセスできるオブジェクトです。documentオブジェクトはwindowオブジェクトのプロパティの一つです。このオブジェクトを使うことで、Webページの内容だけでなく、ブラウザそのものの動作に対しても反応することができます。例えば、ブラウザのサイズやスクロール位置を取得したり、ユーザーにメッセージを表示したりすることができます。また、スクロールやリサイズのイベントを検知して、それに応じた処理を実行することもできます。
例えば以下のように記述するとWebページの全てのリソース（画像やスタイルシートなど）が完全に読み込まれた時に行う処理を記述することができます。
1
2
3
4
window.addEventListener('load', () => {
// ページ全体のリソースが読み込まれた後に実行される
console.log('ページが完全にロードされました');
});
DOM操作の基本的なメソッド
JavaScriptのDOM操作は主にdocumentオブジェクトやwindowオブジェクトに対して行います。ここでは、DOM操作に使用できる基本的なメソッドを紹介します。
要素取得系
この章ではHTMLのソースコードの中から要素を取得するメソッドを紹介します。
getElementById()
引数に指定したidを持つ要素を取得するメソッドです。idはHTMLの中では一意でなければなりませんが、同じidを持つ要素が複数ある場合は多くのブラウザで最初にマッチした要素を返します。
以下が基本的な使い方です。
1
const element = document.getElementById('idの値')
以下の画像のように全てのソースコードを持っているdocumentの中から引数に渡したidが付与されている要素を探し出して取得します。
以下はgetElementByIdを使い取得した要素をクリックするとアラートが出る例です。
1
<button id="myButton">クリックしてね</button>
1
2
3
4
5
6
7
// idがmyButtonの要素を取得し、定数buttonに代入
const button = document.getElementById('myButton');
// 取得した要素がクリックされると取得した要素を表示
button.addEventListener('click',() => {
alert(button.outerHTML);
});
今回は、HTMLコードの中からidがmyButtonである要素を取得するために、HTML全体の情報を持つdocumentオブジェクトを使用します。取得した要素は基本的に定数や変数に代入します。
取得した要素（今回はbutton）がクリックされたときに特定の処理を実行するために、addEventListenerを使用しています。この要素自体をアラートとして表示するためには、outerHTMLプロパティを使用する必要があります。このプロパティについては、後ほど解説します。
ボタンをクリックして、要素が正しく取得できているか確認しましょう。クリックした要素である「<button id="myButton">クリックしてね</button>」が表示されるはずです。
See the Pen javascript_dom_getelementbyid by miyajima yuya (@pikawaka) on CodePen.
getElementsByClassName()
指定したクラスを持つ要素をすべて取得するメソッドです。getElementByIdメソッドと違い、複数の要素を取得するため、配列のように扱うことができるHTMLコレクションとして返されます。
以下が基本的な使い方です。
1
const elements = document.getElementsByClassName('クラス名')
以下のように指定したクラス名の要素をHTMLコレクションとして取得します。
以下はボタンをクリックするとgetElementsByClassNameを使って取得した要素が表示される例です。
1
2
3
4
5
<div class="example">最初の例</div>
<div class="example">二番目の例</div>
<div class="example">三番目の例</div>
<button id="getAll">取得した全ての要素を表示</button><br>
<button id="getFirst">取得した最初の要素を表示</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const getAllButton = document.getElementById('getAll');
const getFirstButton = document.getElementById('getFirst');
// クラス名がexampleの要素をすべて取得
const elements = document.getElementsByClassName('example');
// クリックされると取得した要素をすべて表示
getAllButton.addEventListener("click", () => {
for (let element of elements) {
alert(element.outerHTML);
}
});
// クリックされると取得した最初の要素を表示
getFirstButton.addEventListener("click", () => {
alert(elements[0].outerHTML);
});
この例では、for文を使って取得した要素を一つずつ取り出し、アラートで表示させています。HTMLコレクションは配列ではないため、eachメソッドは使用できないので注意が必要です。最初の要素を取得する際には配列の時と同様、indexの値を[]に入れて取得します。
「取得した全ての要素を表示」ボタンをクリックすると、exampleクラスを持つ全ての要素を順番に表示します。
「取得した最初の要素を表示」ボタンをクリックすると、exampleクラスを持つ要素の中で、取得した最初の要素のみが表示されることを確認できます。
See the Pen javascript_dom_getElementsByClassName by miyajima yuya (@pikawaka) on CodePen.
getElementsByTagName()
指定したタグ名を持つ要素をすべて取得するメソッドです。getElementsByClassNameと同様に、HTMLコレクションを返します。
以下が基本的な使い方です。
1
const elements = document.getElementsByTagName('タグ名')
以下のようにpタグを指定すると全てのp要素をHTMLコレクションとして取得できます。
以下はボタンをクリックするとHTMLのソースコード内のすべてのdiv要素を取得する例です。
1
2
3
4
<div>最初のdiv要素</div>
<div>二番目のdiv要素</div>
<p>段落要素</p>
<button id="myButton">クリックしてdiv要素を取得</button>
1
2
3
4
5
6
7
8
9
10
11
const button = document.getElementById('myButton');
// すべてのdiv要素を取得
const tags = document.getElementsByTagName('div');
// クリックされると取得した要素をすべて表示
button.addEventListener("click", () => {
for (let div of tags) {
alert(div.outerHTML);
}
});
ボタンをクリックするとすべてのdiv要素が順番に表示されるのが確認できます。
See the Pen javascript_dom_getElementsByTagName by miyajima yuya (@pikawaka) on CodePen.
querySelector()
指定したCSSセレクタに一致する最初の要素を取得するメソッドです。idやクラス名、属性などを指定できます。
セレクタ名は.クラス名、#id、p、[title="Pikawaka"]といった形式で指定します。
以下が基本的な使い方です。
1
const element = document.querySelector('セレクタ名');
以下のようにクラス名で指定した場合、複数の要素を取得するのではなく、最初にヒットする要素のみを取得します。
以下はクリックするとクラス名がexampleの要素の最初の要素を取得する例です。
1
2
3
<div class="example">最初の例</div>
<div class="example">二番目の例</div>
<button id="myButton">クリックして取得</button>
1
2
3
4
5
6
7
8
9
const button = document.getElementById('myButton');
// クラス名がexampleの最初の要素を取得
const element = document.querySelector('.example');
// クリックされると取得した要素を表示
button.addEventListener('click', () => {
alert(element.outerHTML);
});
getElementsByClassNameと同じようにクラス名から要素を取得しますが、最初の要素のみを取得するという点で異なっています。
ボタンをクリックすると最初の要素のみが表示されるのが確認できます。
See the Pen javascript_dom_querySelector by miyajima yuya (@pikawaka) on CodePen.
querySelectorAll()
指定したCSSセレクタに一致するすべての要素を取得するメソッドです。idやクラス名、属性などを指定できます。複数の要素を取得するため、配列のように扱うことのできるNodeListとして返ります。
以下が基本的な使い方です。
1
const elements = document.querySelectorAll('セレクタ名')
以下のようにクラス名で指定した場合、全ての要素をNodeLIstとして取得します。
以下はul要素の直下にある最初のli要素をすべて取得する例です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<ul class="list">
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>
<ul class="list">
<li class="item">Item 5</li>
<li class="item">Item 6</li>
</ul>
<button id="myButton">クリックして全てを取得</button>
1
2
3
4
5
6
7
8
9
10
11
const button = document.getElementById('myButton');
// ul要素の最初のli要素をすべて取得
const elements = document.querySelectorAll('ul > li:first-child');
// クリックされると取得した要素を順番に表示
button.addEventListener("click", () => {
for (let element of elements) {
alert(element.outerHTML);
}
});
ボタンをクリックするとul要素の最初のli要素が順番に出力されるのが確認できます。
See the Pen javascript_dom_querySelectorAll_1 by miyajima yuya (@pikawaka) on CodePen.
HTMLコレクションとNodeListは、どちらも複数のHTML要素をまとめて扱うための方法ですが、いくつかの違いがあります。
HTMLコレクションは、ページの内容が変わると自動的にその変更を反映します。例えば、新しい要素が追加されたり、削除されたりすると、HTMLコレクションもその変更を自動的に反映します。
それに対し、querySelectorAllで取得したNodeListはページの内容が変わっても更新されません。つまり、一度取得するとそのままの状態を保持するという違いがあります。
テキスト操作系
この章では要素のテキストを操作できるプロパティを紹介します。
textContent
指定した要素のテキスト内容を取得または設定するためのプロパティです。HTMLの構造や要素を無視して、テキストのみを操作します。以下が基本的な使い方です。
1
2
3
4
5
// テキストを取得
const text = 要素.textContent
// テキストを設定
要素.textContent = "新しいテキスト"
以下は各ボタンをクリックすると要素内のテキストを取得したり設定する例です。
1
2
3
4
5
<div id="content">
<p id="example">変更前のテキスト</p>
</div>
<button id="get">取得する</button> <button id="set">設定する</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const getButton = document.getElementById('get');
const setButton = document.getElementById('set');
// 取得・設定する要素
const content = document.getElementById("content")
// クリックするとコンテンツを取得
getButton.addEventListener('click', () => {
// コンテンツを取得
alert(content.textContent)
});
// クリックするとコンテンツを設定
setButton.addEventListener('click', () => {
// コンテンツを設定
content.textContent = '変更されたテキスト'
});
div要素内にp要素がありますが、content.textContent = '変更されたテキスト'でテキストを代入しているので、p要素は削除され、指定したテキストのみが要素内に残ります。そのため、テキストをセットした後は上下の余白がなくなることを確認できます。
See the Pen javascript_dom_textContent by miyajima yuya (@pikawaka) on CodePen.
要素が2つ以上の場合はすべてのテキストを取得します。
1
2
3
4
5
6
<div id="content">
<p id="example1">段落1</p>
<p id="example2">段落2</p>
</div>
<button id="get">取得する</button> <button id="set">設定する</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const getButton = document.getElementById('get');
const setButton = document.getElementById('set');
// 取得・設定する要素
const content = document.getElementById("content")
// クリックするとコンテンツを取得
getButton.addEventListener('click', () => {
// コンテンツを取得
alert(content.textContent)
});
// クリックするとコンテンツを設定
setButton.addEventListener('click', () => {
// コンテンツを設定
content.textContent = '変更されたテキスト'
});
「取得する」をクリックすると要素内のテキストのみがすべて取得できるのを確認できます。「設定する」をクリックすると2つの<p>要素は削除され「変更されたテキスト」というテキストのみに変わります。
See the Pen javascript_dom_textContent2 by miyajima yuya (@pikawaka) on CodePen.
innerText
指定した要素やその子要素の表示されるテキストを操作するプロパティです。このプロパティはCSSの影響を受けるため、スタイルの違いや要素の表示状態によって結果が変わることがあります。
以下が基本的な使い方です。
1
2
3
4
5
// テキストを取得
const text = 要素.innerText
// テキストを設定
要素.innerText = "新しいテキスト"
textContentと同じように見えますが、非表示になっているテキストは取得することができません。以下がその例です。
1
2
3
4
5
6
7
8
<div id="content">
<p>段落1</p>
<p class="hidden">段落2</p>
<p>段落3</p>
</div>
<button id="getTextContent">textContentを取得</button>
<button id="getInnerText">innerTextを取得</button>
1
2
3
.hidden {
display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
const getTextContentButton = document.getElementById('getTextContent');
const getInnerTextButton = document.getElementById('getInnerText');
const contentElement = document.getElementById('content');
// textContentで取得
getTextContentButton.addEventListener('click', () => {
alert(contentElement.textContent);
});
// innerTextで取得
getInnerTextButton.addEventListener('click', () => {
alert(contentElement.innerText);
});
各ボタンをクリックするとinnerTextは非表示のテキストは取得できていないのが確認できます。
See the Pen javascript_dom_innerText by miyajima yuya (@pikawaka) on CodePen.
innerHTML
指定した要素の内部のHTMLコンテンツを取得したり設定するためのプロパティです。HTMLコンテンツとは要素と、その要素が含むテキストや属性を指します。
以下が基本的な使い方です。
1
2
3
4
5
// コンテンツを取得
const content = 要素.innerHTML
// コンテンツを設定
要素.innerHTML = "新しいコンテンツ"
以下は各ボタンをクリックするとdiv要素内のコンテンツを取得したり設定する例です。
1
2
3
4
5
<div id="content">
<p id="example">変更前のコンテンツ</p>
</div>
<button id="get">取得する</button> <button id="set">設定する</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const getButton = document.getElementById('get');
const setButton = document.getElementById('set');
// 取得・設定する要素
const content = document.getElementById("content")
// クリックするとコンテンツを取得
getButton.addEventListener('click', () => {
// コンテンツを取得
alert(content.innerHTML)
});
// クリックするとコンテンツを設定
setButton.addEventListener('click', () => {
// コンテンツを設定
content.innerHTML = '<p>変更されたコンテンツ</p>'
});
各ボタンをクリックすると取得・設定が確認できます。
See the Pen javascript_dom_innerHTML by miyajima yuya (@pikawaka) on CodePen.
「<p id="example">変更前のコンテンツ</p>」といったように、親要素であるdiv要素の内側のHTMLコンテンツのみ取得しているのが確認できます。
outerHTML
要素自身とその内容全体を含むHTMLの文字列を取得または設定するためのプロパティです。innerHTMLが要素の内側のHTMLを操作するのに対し、outerHTMLは要素そのものを含むHTML全体を操作します。
以下が基本的な使い方です。
1
2
3
4
5
// コンテンツを取得
const content = 要素.outerHTML
// コンテンツを設定
要素.outerHTML = "新しいコンテンツ"
以下は各ボタンをクリックすると要素内のコンテンツを取得したり設定する例です。
1
2
3
4
5
<div id="content">
<p id="example">段落</p>
</div>
<button id="get">取得する</button> <button id="set">設定する</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const getButton = document.getElementById('get');
const setButton = document.getElementById('set');
const contentElement = document.getElementById('content');
// 取得ボタンのクリックイベントリスナー
getButton.addEventListener('click', () => {
// コンテンツを取得してアラートで表示
alert(contentElement.outerHTML);
});
// 設定ボタンのクリックイベントリスナー
setButton.addEventListener('click', () => {
// コンテンツを設定
contentElement.outerHTML = '<h1 id="content"><p id="example">見出し</p></h1>';
// contentElementを再取得して更新する
contentElement = document.getElementById('content');
});
各ボタンをクリックすると要素ごとに取得・設定されていることが確認できます。
See the Pen javascript_dom_outerHTML by miyajima yuya (@pikawaka) on CodePen.
innerHTMLと違い、要素そのものを含むHTMLが表示されるのが確認できます。要素の設定後は新たな要素として上書きされるので、変更後の内容をアラートで出力するには変数に再代入する必要があります。
要素操作系
この章では要素を操作するメソッドを紹介します。
createElement()
新しいHTML要素を作成するメソッドです。
以下が基本的な使い方です。
1
const newElement = document.createElement('要素名');
以下は新しいdiv要素を作成する例です。
1
2
<button id="myButton">クリックして要素を取得</button>
作成した要素には以下のようにしてテキストや属性をセットすることもできます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const button = document.getElementById('myButton');
// 新しいdiv要素を作成
const newDiv = document.createElement('div');
// 作成した要素にテキストをセット
newDiv.textContent = "作成した要素"
// 作成した要素にid属性をセット
newDiv.id = 'myNewDiv';
// 作成した要素にclass属性をセット
newDiv.className = 'myClass';
// クリックすると作成したdiv要素を表示
button.addEventListener('click', () => {
alert(newDiv.outerHTML);
});
// 出力
// <div id="myNewDiv" class="myClass">作成した要素</div>
ボタンをクリックすると作成したdiv要素が確認できます。
See the Pen javascript_dom_createElement by miyajima yuya (@pikawaka) on CodePen.
これだけでは、新たな要素を作成しただけで意味がありません。次に紹介するappendChild()メソッドを使い、Webページ内に追加することで、新たな要素を反映させることができます。
appendChild()
親要素に子要素を追加するメソッドです。基本的にcreateElement()メソッドを使用して新しい要素を作成し、その後appendChild()メソッドを使用して既存の要素に追加します。
以下が基本的な使い方です。
1
親要素.appendChild(追加する子要素)
以下はボタンをクリックするとul要素に新たなli要素を追加する例です。
1
2
3
4
5
<ul id="example">
<li id="example1">例1</li>
</ul>
<button id="myButton">クリックして追加</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const button = document.getElementById('myButton');
// 新しいli要素を作成
const newList = document.createElement('li');
// 作成した要素にテキストをセット
newList.textContent = "例2"
// 作成した要素にid属性をセット
newList.id = "example2"
// 追加するリストを取得
const exampleLists = document.getElementById('example')
// クリックすると要素を追加
button.addEventListener('click', () => {
// li要素を追加
exampleLists.appendChild(newList)
});
クリックすると実際に要素が追加されるのが確認できます。
See the Pen javascript_dom_appendChild by miyajima yuya (@pikawaka) on CodePen.
removeChild()
親要素から指定した子要素を削除するメソッドです。
以下が基本的な書き方です。
1
親要素.removeChild(削除する子要素)
以下はボタンをクリックするとul要素内の指定した子要素を削除する例です。
1
2
3
4
5
6
<ul id="example">
<li id="example1">例1</li>
<li id="example2">例2</li>
</ul>
<button id="myButton">クリックしてね</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
const button = document.getElementById('myButton');
// 削除するリストを取得
const exampleList1 = document.getElementById('example1')
// 親要素を取得
const exampleLists = document.getElementById('example')
// クリックすると要素を削除
button.addEventListener('click', () => {
// li要素を削除
exampleLists.removeChild(exampleList1)
});
クリックすると指定したリストが削除されるのが確認できます。
See the Pen javascript_dom_removeChild by miyajima yuya (@pikawaka) on CodePen.
replaceChild()
親要素から指定した子要素を別の新しい要素に置き換えるメソッドです。
以下が基本的な使い方です。
1
親要素.replaceChild(新しい要素, 指定した要素)
以下はボタンをクリックするとul要素内の指定した子要素を新しい要素に置換する例です。
1
2
3
4
5
6
7
<ul id="list">
<li id="example1">Item 1</li>
<li id="example2">Item 2</li>
<li id="example3">Item 3</li>
</ul>
<button id="myButton">クリックしてね</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const button = document.getElementById('myButton');
// 親要素を取得
const exampleLists = document.getElementById('list');
// 置き換える要素を取得
const oldItem = document.getElementById('example1');
// 新しい子要素を作成
const newItem = document.createElement('li');
newItem.textContent = 'newItem';
// クリックすると要素を置換
button.addEventListener('click', () => {
// li要素を置換
exampleLists.replaceChild(newItem, oldItem);
});
クリックすると要素が置換されるのが確認できます。
See the Pen javascript_dom_replaceChild by miyajima yuya (@pikawaka) on CodePen.
insertBefore()
新しい要素を参照する要素の前に挿入するメソッドです。以下が基本的な使い方です。
1
親要素.insertBefore(新しい要素, 参照要素）
以下はボタンをクリックすると「アイテム2」の要素の前に新しい要素を挿入する例です。
1
2
3
4
5
6
7
<ul id="myList">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<button id="myButton">要素を挿入</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const button = document.getElementById('myButton');
// 親要素を取得
const list = document.getElementById('myList');
// 新しい要素を作成
const newItem = document.createElement('li');
newItem.textContent = '新しいアイテム';
// 参照要素を取得（挿入したい位置の直前の要素）
const referenceNode = list.children[1]; // アイテム2
// クリックすると要素を挿入
button.addEventListener('click', () => {
// 挿入を実行
list.insertBefore(newItem, referenceNode);
});
childrenは特定の要素の子要素にアクセスするためのプロパティです。
ボタンをクリックすると指定した要素の「アイテム2」の前に新しい要素が挿入されるのが確認できます。
See the Pen javascript_dom_insertBefore by miyajima yuya (@pikawaka) on CodePen.
getAttribute()
特定の要素の指定した属性の値を取得するメソッドです。以下が基本的な使い方です。
1
要素.getAttribute('取得する属性名')
例えば、以下のHTMLを見てみましょう。
1
2
3
<a id="myLink" href="https://pikawaka.com" title="Pikawaka">Pikawaka</a>
<button id="myButton">クリックして取得</button>
このリンク要素のhref属性とtitle属性を取得するには、以下のようにします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const button = document.getElementById('myButton');
// 属性を取得する対象の要素を取得
const link = document.getElementById('myLink');
// href属性を取得
const hrefValue = link.getAttribute('href');
// title属性を取得
const titleValue = link.getAttribute('title');
button.addEventListener('click', () => {
alert(hrefValue); // "https://pikawaka.com"
alert(titleValue); // "pikawaka"
});
ボタンをクリックすると属性が取得できているのが確認できます。
See the Pen javascript_dom_getAttribute by miyajima yuya (@pikawaka) on CodePen.
setAttribute()
特定の要素に属性を設定するメソッドです。以下が基本的な使い方です。
1
要素.setAttribute('設定する属性名', '設定する属性の値')
例えば、以下のHTMLがあるとします。
1
2
3
<a id="myLink" href="https://pikawaka.com" title="Pikawaka">Pikawaka</a>
<button id="myButton">クリックして設定</button>
このリンク要素のhref属性とtitle属性を変更したい場合、以下のようにします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const button = document.getElementById('myButton');
// 属性を設定する対象の要素を取得
const link = document.getElementById('myLink');
// href属性を設定
link.setAttribute('href', 'https://pikawaka.com/lp');
// title属性を設定
link.setAttribute('title', 'Pikawakaクラス');
// 設定したhref属性を取得
const hrefValue = link.getAttribute('href');
// 設定したtitle属性を取得
const titleValue = link.getAttribute('title');
button.addEventListener('click', () => {
alert(hrefValue); // "https://pikawaka.com"
alert(titleValue); // "Pikawakaクラス"
});
setAttributeメソッドの返り値はundefinedです。そのため、設定されているか確認するために設定後にgetAttributeを使って値を取得しています。
ボタンをクリックすると新たな値に設定されているのが確認できます。
See the Pen javascript_dom_setAttribute by miyajima yuya (@pikawaka) on CodePen.
removeAttribute()
特定の要素から指定した属性を削除するメソッドです。以下が基本的な使い方です。
1
要素.removeAttribute('削除する属性名')
例えば、以下のHTMLがあるとします。
1
2
3
<a id="myLink" href="https://pikawaka.com" title="Pikawaka">Pikawaka</a>
<button id="myButton">クリックして削除</button>
このリンク要素からtitile属性を削除する場合は、以下のようにします。
1
2
3
4
5
6
7
8
9
10
const button = document.getElementById('myButton');
// 属性を削除する要素を取得
const link = document.getElementById('myLink');
button.addEventListener('click', () => {
// title属性を削除
link.removeAttribute('title');
alert(link.hasAttribute('title'));
});
hasAttributeメソッドは呼び出した要素に属性が存在するかを確認するメソッドです。要素に属性が存在すればtrueを、存在しない場合はfalseが返ります。この例ではtitle属性をremoveAttributeメソッドで削除しているため、falseが返ります。
ボタンを押すと属性が削除され、falseが表示されるのが確認できます。
See the Pen javascript_dom_removeAttribute by miyajima yuya (@pikawaka) on CodePen.
注意点
HTMLの<head>タグ内にJavaScriptを記述すると、ブラウザはHTMLの解析中にスクリプトを実行します。これはコードが上から順に読み込まれるためです。この時点ではまだHTML全体が読み込まれていないため、DOM操作が失敗することがあります。
1
2
3
4
5
6
7
8
9
10
<head>
<script>
// この時点ではHTMLがまだ完全に読み込まれていない
document.getElementById('myElement').innerText = 'こんにちは';
</script>
</head>
<body>
<div id="myElement"></div>
</body>
これを防ぐためにはDOMContentLoadedを使います。
1
2
3
4
5
6
7
8
9
10
11
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
// HTMLの読み込みが完了した後に実行される
document.getElementById('myElement').innerText = 'こんにちは';
});
</script>
</head>
<body>
<div id="myElement"></div>
</body>
DOMContentLoadedイベントを使うことで、HTMLの読み込みと解析が完了した後にJavaScriptを実行できるため、エラーが発生しません。windowのloadイベントを使っても、ページ全体のリソース（画像やスタイルシートなど）が完全に読み込まれた後に処理を実行することで同様にエラーを防ぐことができます。しかし、DOMContentLoadedはHTMLの解析のみが完了した時点で実行されるため、より早く処理を開始できるのでこちらの方が適しています。
その他にもJavaScriptを<body>タグの閉じる直前に配置することで、HTMLが先に読み込まれるようにする方法もあります。
1
2
3
4
5
6
7
8
<body>
<div id="myElement"></div>
<script>
// HTMLが既に読み込まれているので、このまま実行しても問題ない
document.getElementById('myElement').innerText = 'こんにちは';
</script>
</body>
これらの方法を使うことで、HTMLの読み込みが完了する前にJavaScriptが実行されるのを防ぎ、エラーが起こらなくなります。
まとめ
このようにDOMを操作するメソッドを使うことで、HTMLソース内の要素を自由に操作することができます。ぜひaddEventListenerメソッドとセットでマスターしておきましょう。
この記事のまとめ
- DOMはWebページの各要素を自由に操作するための仕組みです。
documentオブジェクトにはWebページのソースコードの全てが含まれています。- DOMを指定して
addEventListenerメソッドを使い、イベントハンドリングを行います。
