JavaScriptのDOM操作について学習の過程で出てきた基礎的な事項をまとめました
何か間違いなどあればご指摘いただければ幸いです
イベントとイベントハンドラ
イベントとはユーザがブラウザ上で行う様々な動作のことです
マウスのクリックや、ポインタの挙動などあらゆる動作のことを指します
イベントハンドラとはイベントの発生をキッカケとして、何らかの処理を実行することです
プロパティを使ったイベントとイベントハンドラの関連付け
// イベントの発生を検知したい要素を指定します（getElementByIdは後ほど説明します）
const event = document.getElementById('イベントを検知したい要素のid属性値');
// 指定した要素がクリックされたときに任意の動作を行う
event.onclick = () => {
// 行いたい処理を記述する
}
onclickによってクリックイベントとイベントハンドラを関連づけることができます
イベントの種類は任意で変更できます
addEventListenerを使ったイベントとイベントハンドラの関連付け
// イベントの発生を検知したい要素を指定します
const event = document.getElementById('イベントを検知したい要素のid属性値');
// 指定した要素がクリックされたときに任意の動作を行う
event.addEventLintener('click', () => {
// 行いたい処理を記述する
}, false);
addEventListenerの第一引数にイベントの種類を記述し、アロー関数内にイベントハンドラを記述します
この場合ではクリックイベントのときの処理を記述します
第三引数のfalseはイベントの伝播形式を指定しています
イベントの伝播形式については、以下のいりこ氏(@irico)の記事で説明されています
執筆時点で最終更新日から3年以上経過していますが非常に分かりやすい記事となっています
getElementByIdメソッド
指定したid属性値を持つ要素を1つ取得します
指定したid属性値を持つ要素が無ければnullを返します
const text = document.getElementById('取得したいid属性値');
console.log(text);
console.log(text.innerText);
textにはHTMLのタグを含めた要素が格納されます
innerTextを使えば要素内のテキストのみを出力できます
getElementsByTagNameメソッド
指定したタグ名を持つ要素を取得します
同一タグは複数ある可能性があるのでElementsと複数形になっていることに注意しましょう
const elements = document.getElementsByTagName('取得したい要素名');
// 繰り返し処理でelements内の要素を一つずつ出力する
for(let i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
elements内には配列に似た構造で要素が格納されます
getElementsByNameメソッド
指定したname属性値を持つ要素を取得します
const elements = document.getElementsByName('取得したいname属性値');
// elements内の要素を出力する
console.log(elements[0].value);
elements内には配列に似た構造で要素が格納されます
今回は一つしかない仮定のため、0を指定して出力します
valueメソッドは指定された要素のみを取得します
getElementsByClassNameメソッド
指定したclass属性値をもつ要素を取得します
const elements = document.getElementsByClassName('取得したいclass属性値');
// 繰り返し処理でelements内の要素を一つずつ出力する
for(let i = 0; i < elements.length; i++) {
console.log(elements[i]).innerText);
}
elements内には配列に似た構造で要素が格納されます
ノード
まずDOMではHTMLをツリー構造として扱います
<html>タグ内に<head>タグと<body>タグがぶら下がっています
更に<body>タグには<header>タグ、<main>タグ、<footer>タグがあります
その中にも<h1>タグから<h6>タグ、<p>タグや<img>タグ、<div>タグなどがあります
<body>
<div id='contents'>
<h1>見出し1</h1>
<p>テキストテキストテキスト</p>
</div>
</body>
<div>タグから見れば<body>タグは親ノードと呼びます
<div>タグから見れば<h1>タグと<p>タグは子ノードと呼びます
<h1>タグから見れば<p>タグは兄弟ノードと呼びます
HTMLの要素を表すもの（タグのこと）を要素ノードと呼びます
要素ノード内のテキストはテキストノードと呼びます
<div>タグ内にあるような属性は属性ノードと呼びます
以下にDOM操作を使ったノードの追加方法と置換方法、削除方法をまとめます
ノードの追加
// 新たに追加したいノードの要素名を指定する
const element = document.createElement('追加したい要素名');
// 新たに追加したいノードのテキストを指定する
const text = document.createTextNode('追加したいテキスト');
// テキストノードを新規作成したノードに加える
element.appendChild(text);
// 新規作成したノードをどのノード内に追加するか指定する
const parentElement = document.getElementById('子要素を追加したい要素のid属性値');
parentElement.appendChild(element);
この場合には指定したid属性値を持つノード内の子ノードの一番最後に追加されます
追加されるノードはcreateElementメソッドで任意の要素名を与えられており、
createTextNodeメソッドで任意のテキストノードを持っています
appendChildメソッドは指定したノードに第一引数を子ノードとして追加します
ノードの置換
// 置き換えたいノードの要素名を指定する
const newElement = document.createElement(`置き換えたいノードの要素名`);
// 置き換えたいノードの属性名と属性値を指定する
newElement.setAttribute('置き換えたいノードの属性名', '置き換えたいノードの属性値');
// 置き換えたいノードのテキストを指定する
const newText = document.createTextNode('置き換えたいテキスト');
// テキストノードを置き換えたいノードに加える
newElement.appendChild(newText);
// 置き換えられるノードを指定する
const oldElement = document.getElementById('置き換えられる要素のid属性値');
// 置換が発生するノードの親ノードを指定する
const parentElement = oldElement.parentNode;
// 置き換えたいノードと置き換えられるノードを指定する
parentElement.replaceChild(newElement, oldElement);
この場合は指定したid属性を持つノードが新たなノードに置き換えられます
新たなノードはsetAttributeメソッドによって任意の属性名と属性値が定められています
replaceChildメソッドは指定したノードの第二引数で指定した子ノードを、第一引数で指定した子ノードに置換します
ノードの削除
// 削除したいノードの親ノードを指定する
const parentElement = document.getElementById(`削除したいノードの親ノードのid属性値`);
// 削除したいノードの要素名を指定する（複数指定される）
const elements = parentElement.getElementByTagName(`削除したいノードの要素名`);
// 配列の一番最後にあるノードを指定する
const removeIndex = elements.length - 1;
// 削除したいノードを指定する
parentElement.removeChild(elements[removeIndex]);
この場合は指定したid要素を持つノードの子ノードの中でも、一番最後のものが削除されます
削除したいノードの要素名を指定したときにノードの配列として返されます
lengthは配列数を返しますが配列は0から数えられるため、1を引いて指定されるノードを一番最後のノードにします
removeChildメソッドは引数に削除したいノードを持ち、当該箇所を削除します