JavaScript基礎の基(健忘録)
⭐️DOMとはJavaScriptの機能ではなくブラウザの機能
1.Webサーバから受け取ったHTML文章を解析してデータ構造に変換する
2.DOMにCSSなどを解析してスタイルを紐づけて描写する
１〜２の間にJavaScriptがDOMにアクセスして、内容を書きかえる
◎documentオブジェクト：DOM操作のためのメソッドを持っている
DOM操作のためのメソッド（document. element.で使用）
| 目的 | 内容 | メソッド | 戻り値 |
|---|---|---|---|
| 検索 | idで要素を検索 | document.getElementById(id) | Element |
| 検索 | classで要素を検索 | document.getElementsByClassName(name) | HTMLCollection |
| 検索 | name属性で要素を検索 | document.getElementsByName(name) | NodeList |
| 検索 | HTMLタグ名で要素を検索 | document.getElementsByTagName(name) | HTMLCollection |
| 検索 | セレクターで合致するはじめの要素のみ検索 | document.querySelector(selectors) | Element |
| 検索 | セレクターで複数の要素を検索 | document.querySelectorAll(selectors) | NodeLis |
| 属性取得 | HTMLの属性を取得 | element.getAttribute(name) | ※属性更新 HTMLの属性を設定（上書き） |
| 属性削除 | HTMLの属性を削除 | element.removeAttribute(name) | - |
| 挿入 | 最後の子要素として追加 node.appendChild(newElement) | - | |
| ※挿入 | 対象要素の直前に挿入 | element.insertAdjacentElement(‘beforebegin’, object); | - |
| ※挿入 | 対象要素の内部の最初に挿入 | element.insertAdjacentElement(‘afterbegin’, object); | - |
| ※挿入 | 対象要素の内部の最後に挿入 | element.insertAdjacentElement(‘beforeend’, object); | - |
| ※挿入 | 対象要素の直後に挿入 | element.insertAdjacentElement(‘afterend’, object); | - |
| ※挿入 | referenceElementの前にnewElementを追加 | node.insertBefore(newElement, referenceElement) | - |
| ※生成 | HTMLタグで要素を作成 | document.createElement(name) | - |
| 削除 | 要素を削除 | element.remove() | - |
| 削除 | 子要素を削除 | element.removeChild() | - |
const button = document.getElementById('the-button');
const button = document.querySelector('#the-button');
const buttons = document.querySelectorAll('.button');
※DOMの生成
const image = document.createElement('img');
image.setAttribute('src', '/images/cute-cat.png');
image.setAttribute('alt', 'かわいいネコ');
↑↑生成しただけでは特に意味は無く
DOM に挿入することで、画面に反映される↓↓
const element = document.querySelector('#elem-1');
element.insertAdjacentElement('beforebegin', image);
◎あるノードを基点に別ノードを取得（element.でプロパティを使用）
| プロパティ | 説明 | 取得できるもの |
|---|---|---|
| parentNode | 親要素 | NodeList（テキストノード＋HTMLCollection） |
| childNodes | 子要素 | NodeList（テキストノード＋HTMLCollection） |
| children | 子要素のリスト | HTMLCollectionテキスト× |
| firstChild | 最初の子要素 | lastChild |
| ※nextElementSibling 1つ後の要素 | ||
| ※previousElementSibling 1つ前の要素 |
※コード上の改行やホワイトスペースも、テキストノードの形で DOM の一部に組み込まれるため
nextSibling、previousSiblingでは期待通りに取得できない
◎クラスリストのプロパティ
// クラスを追加する
element.classList.add('is-active');
// クラスを削除する
element.classList.remove('is-active');
// クラスの有無を切り替える
element.classList.toggle('is-active');
// クラスを持っているか？
element.classList.contains('is-active');
※setAttribute などで実装しようとすると、空白区切りの考慮などが必要なため、classListを利用するのが適切
☆イベント
大抵のDOM操作は登録された時点では実行されない。
ブラウザ操作（＝イベント）が行われてはじめて実行される。
◎イベントリスナー
addEventListenerメソッドを使用して、要素にイベントを登録するための関数
要素に複数登録することができ、同一のイベントに対して複数の処理を実行することができる
removeEventListenerメソッドを使用して、イベントの登録を解除することができる
【イベントリスナーのタイプ一覧】
| タイプ | 区分 | イベント発生 |
|---|---|---|
| submit | フォーム | フォーム送信 |
| reset | フォーム | フォームリセット |
| select | フォーム | テキストの選択 |
| input | フォーム | 値を入力 |
| load | 操作 | ページ読み込み完了 |
| scroll | 操作 | スクロール |
| click | マウス | マウスをクリック |
| dblclick | マウス | マウスをダブルクリック |
| mousedown | マウス | マウス |
| mouseup | マウス | マウスボタンを離す |
| mouseenterマウス | マウスが要素に入る | |
| mouseleave | マウス | マウスが要素を出る |
| mouseover | マウス | マウスが要素に入る、子要素から出る |
| mouseout | マウス | マウスが要素から出る、子要素に入る |
| mousemove | マウス | 要素中でマウスを移動 |
| keypress | キーボード | キーを押す(日本語、Shift、Alt等未対応) |
| keydown | キーボード | キーを押す(日本語、Shift、Alt等対応) |
| keyup | キーボード | キーを離す(日本語、Shift、Alt等対応) |
| focus | フォーカス | 要素がフォーカスされる |
| blur | フォーカス | 要素がフォーカスから外れる |
◎イベントハンドラ
HTML要素の属性として指定されるJavaScript関数
onclickなどの属性として使用され、要素には1つのイベントハンドラーしか登録できない
addEventListenerメソッドで登録することはできずremoveEventListenerメソッドは存在しないため、イベントハンドラーを解除する場合は属性の値をnullに設定する必要がある
| イベントハンドラ | 説明 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更された時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSelectStart | ページ内の要素が選択されようとした時に発生 ※IEのみ |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onAbort | 画像の読み込みを中断した時に発生 |
| onError | 画像の読み込み中にエラーが発生した時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onUnload | ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onKeyPress | キーを押してる時に発生 |
| onMouseOut | マウスが離れたした時に発生 |
| onMouseOver | マウス乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
| onDragDrop | マウスでドラッグ＆ドロップした時に発生 ※NN4のみ |
イベントリスナーを使用する場合:
| # | 型 | 内容 | - |
|---|---|---|---|
| 第一引数 | 文字列 | ＝※イベントオブジェクト イベント名 | 必須 |
| 第二引数 | 関数＝functionなど イベントハンドラー | 必須 | |
| 第三引数 | 真偽 or オブジェクト | オプション |
HTML:
<button id="myButton">クリックしてください</button>
Javascript：
const myButton = document.querySelector('#myButton'); myButton.addEventListener('click', function() { console.log('ボタンがクリックされました'); });
イベントハンドラーを使用する場合:
function myButtonClick() { console.log('ボタンがクリックされました'); }
<button id="myButton" onclick="myButtonClick()">クリックしてください</button>
Discussion