JavaScript入門 DOM編 (全22回) - プログラミングならドットインストール

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

HTML入門フォームタグ編 (全13回) PREMIUM

PREMIUM

JavaScript入門基礎文法編 (全27回) PREMIUM

PREMIUM

JavaScript入門関数編 (全12回) PREMIUM

PREMIUM

JavaScript入門データ構造編 (全27回) PREMIUM

PREMIUM

動画レッスン一覧 (22)
質問と回答 (11)

#01 DOMについて理解しよう (02:19) 無料公開中
- 概要
- ブラウザの仕組み
- 学習のコツ
- DOM操作の構造
#02 イベントリスナーを追加してみよう (02:31) 無料公開中
- 学習環境の確認
- document.querySelector()
- addEventListener()
- ソースコード比較機能の紹介
#03 textContentを使ってみよう (03:01) 無料公開中
- 処理順の確認
- textContentによる値の設定
- textContentによる値の取得
#04 classListでスタイルを操作してみよう (02:54) 無料公開中
- CSSスタイルの定義
- classList.add()
- classList.remove()
#05 classListでスタイルを切り替えよう (02:59) 無料公開中
- classList.contains()
- trueとfalse
- classList.toggle()
#06 querySelectorAll()で複数の要素を取得しよう (03:01)
- querySelectorAll()
- インデックスによるアクセス
- forEach()による処理
#07 より複雑なセレクターを使ってみよう (02:56)
- クラスセレクターの利用
- idセレクターの利用
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
#08 createElement()で要素を生成しよう (01:56)
- document.createElement()
- textContentの設定
- constで宣言できる理由
#09 appendChild()､insertBefore()を使ってみよう (02:06)
- DOMの構造
- appendChild()
- insertBefore()
#10 要素の追加､削除をしてみよう (02:38)
- appendChild()
- insertBefore()
- remove()
- confirm
#11 フォーム部品の値にアクセスしてみよう (02:50)
- 入力部品の設置
- valueによる値の取得
- textareaの扱い
- valueによる値の設定
#12 ドロップダウンリストの値にアクセスしよう (02:04)
- ドロップダウンリストの設置
- select要素の取得
- valueによる値の取得
#13 ラジオボタンの値にアクセスしよう (02:59)
- ラジオボタンの設置
- querySelectorAll()による要素の取得
- forEach()
- checkedによるチェック
#14 チェックボックスの値にアクセスしよう (02:45)
- チェックボックスの設置
- checkedによるチェック
- 配列の導入
#15 inputイベントを使ってみよう (02:59)
- 入力部品の設置
- inputイベント
- 定数の代入
- lengthによる文字数の取得
- changeイベントの紹介
#16 focus､blurイベントを使ってみよう (02:37)
- フォーカスの説明
- focusイベント
- blurイベント
- focus()
#17 keydownイベントを使ってみよう (02:10)
- イベントリスナーの追加
- アロー関数式の引数
- e.key
#18 mousemoveイベントを使ってみよう (01:35)
- mousemoveイベント
- e.clientX、e.clientY
#19 submitイベントを使ってみよう (02:36)
- formタグの設置
- submitイベント
- e.preventDefault()
- formタグを使うメリット
#20 属性の操作方法を確認しよう (02:47)
- 属性の操作方法
- class属性の注意点
- disabled/checked/selected属性の注意点
#21 style属性を操作してみよう (02:36)
- style属性の操作
- style.fontSize
#22 次のステップを確認しよう (01:50)
- これまでの振り返り
- JavaScriptの学習方針