JavaScriptをネイティブ（Vanilla js）で記載

2023.10.30

JavaScriptをネイティブ（Vanilla js）で記載

目次

  1. 要素取得
  2. 親子要素取得
  3. 属性値操作
  4. HTML・テキスト操作
  5. 要素作成・複製
  6. 要素追加
  7. class操作
  8. 要素サイズ・座標操作
  9. イベントリスナー

ネイティブのJavaScriptもアップデートされていて、以前ほど記述が大変では無くなっている事もあり、コードの軽量化の為に脱jQueryを考えている方も多いと思います。

そこで、今一度おさらいの為、主なJavaScriptの記述方法を掲載します。

要素取得

//ID名
document.getElementById('idName')
//class名
document.getElementsByClassName('className')
//タグ名
document.getElementsByTagName('div')
//セレクタ（最初の要素）
document.querySelector('#test')
//セレクタ（複数要素）
document.querySelectorAll('div.note');

親子要素取得

//祖先要素取得
document.getElementById('idName').closest(selector)
//最初の子要素取得
document.getElementById('idName').firstElementChild
//最後の子要素取得
document.getElementById('idName').lastElementChild
//子要素リスト取得
document.getElementById('idName').children
//直前の兄弟要素取得
document.getElementById('idName').previousElementSibling
//直後の兄弟要素取得
document.getElementById('idName').nextElementSibling

属性値操作

//属性値取得
document.getElementById('idName').getAttribute('alt')
//属性値設定
document.getElementById('idName').setAttribute('alt')
//属性値削除
document.getElementById('idName').removeAttribute('alt')
//属性値があるか確認
document.getElementById('idName').hasAttribute('alt')

HTML・テキスト操作

//HTML要素取得
document.getElementById('idName').innerHTML
//HTML要素取得（指定要素含む）
document.getElementById('idName').outerHTML
//テキスト取得
document.getElementById('idName').innerText
//テキスト取得（指定要素含む）
document.getElementById('idName').outerText

要素作成・複製

//要素作成
document.getElementById('idName').createElement('div');
//要素複製（デフォルト）
document.getElementById('idName').cloneNode(false)
//要素複製（子孫要素含む）
document.getElementById('idName').cloneNode(true)

要素追加

//要素を先頭に追加
document.getElementById('idName').prepend()
//要素を最後に追加
document.getElementById('idName').append()
//要素を最後に追加
document.getElementById('idName').appendChild()

class操作

//class追加
document.getElementById('idName').classList.add('className')
//class削除
document.getElementById('idName').classList.remove('className')
//classが含まれていれば削除、含まれていなければ追加
document.getElementById('idName').classList.toggle('className')
//classが含まれているか確認
document.getElementById('idName').classList.contains('className')

要素サイズ・座標操作

//要素幅取得
document.getElementById('idName').clientWidth
//要素高さ取得
document.getElementById('idName').clientHeight
//要素幅取得（ボーダーボックス）
document.getElementById('idName').offsetWidth
//要素高さ取得（ボーダーボックス）
document.getElementById('idName').offsetHeight
//要素X座標取得
document.getElementById('idName').offsetLeft
//要素Y座標取得
document.getElementById('idName').offsetTop

イベントリスナー

addEventListener(type,関数)

type例

  • click：クリック時（バブリング有）
  • dblclick：ダブルクリック時（バブリング有）
  • contextmenu：右クリック時（バブリング有）
  • mousedown：マウス押下時（バブリング有）
  • mouseup：マウス押下を離した時（バブリング有）
  • mouseenter：マウスがターゲット内に乗った時
  • mouseleave：マウスがターゲットから離れた時
  • mouseover：マウスがターゲット内に入った時（バブリング有）
  • mouseout：マウスがターゲットから出た時（バブリング有）
  • mousemove：マウス移動時（バブリング有）
  • keypress：キー押して離した時
  • keydown：キー押下時
  • keyup：キー押下を離した時
  • select：選択時
  • change：値変化時
  • submit：submit押下時
  • reset：reset押下時
  • focus：フォーカス時
  • blur：フォーカス外れた時
  • load：読み込みが完了時
  • DOMContentLoaded：HTML読み込み、DOMツリーの構築完了時
  • scroll：スクロール位置変更時
  • resize：サイズ変更時

RELATED JOURNAL