jQueryを使わなくてもCSSのセレクタの指定方法でDOMオブジェクトを取得できる。
dom-Object = document. querySelector (セレクタ)
セレクタの書式は、
#xxx で id属性
.xxxで class属性
xxxで 要素 (タグ )名
を指定できる
xxx yyy と空白で間を開けると、 xxxの子孫のyyyの意味
xxx>yyy と＞で間を開けると、 xxxの直下のyyyの意味
xxx+yyy と＋で間を開けると、 xxxの直後のyyyの意味
xxx, yyy とカンマで区切ると、xxxまたはyyyの意味
あと、xxx:yyyの書き方で、xxxの疑似要素または 擬似クラスyyyの意味
疑似要素には、
・要素名:first-line 要素の最初の一行
・要素名:first-letter 要素の最初の一文字
・要素名:before 要素の直前
・要素名:after 要素の直後
疑似クラスには、
・要素名:link 未訪問のリンク
・要素名:visited 訪問済のリンク
・要素名:hover カーソルが乗っている要素
・要素名:active クリック中の要素
・要素名:focus フォーカスされている要素
・要素名:lang 特定の言語を指定した要素
・要素名:first-child 要素内の最初の子要素
となるらしい。
要素.addEventListener( type, listener, option) でイベントを追加できる
type には
・ load Webページの読み込みが完了した時
・ DOMContentLoaded Webページが読み込みが完了した時
・ click マウスボタンをクリックした時
・ mousedown マウスボタンを押している時
・ mouseup マウスボタンを離した 時
・ mousemove マウスカーソルが移動した時
・ keydown キーボードのキーを押した 時
・ keyup キーボードのキーを離した 時
・ keypress キーボードのキーを押している時
・ change フォーム部品の状態が変更された時
・ submmit フォームのsubmitボタンを押した 時
・ scroll 画面がスクロールした時
listenerには function(..) { }で書く
optionには通常はfalseを指定するが、追加した listener を優先して処理する意味。
optionに、capture、once、passiveを指定するには連想リストで指定する。
{ passive: true }