DOM操作

初級
49
4時間54分

要素の取得、テキスト変更、イベント処理、要素の追加・削除など、DOM操作の問題

JavaScriptコースの一部として、DOM操作に関する実践的な練習問題を49問用意しています。 基礎から応用まで段階的に学習できるよう構成されています。

学習を開始する準備ができました

下記の練習問題から始めて、段階的にスキルアップしていきましょう

javascript icon

練習問題一覧 (49問)

問題 1

ブラウザの開発者ツールを開く最も一般的なキーボードショートカットは何ですか?

問題 2

開発者ツールのConsoleタブでconsole.log()の出力を確認する主な目的は何ですか?

問題 3

以下のコードでエラーが発生する原因は何ですか? javascript var element =...

問題 4

開発者ツールのElementsタブで要素をクリックしたときに起こることは何ですか?

問題 5

開発者ツールのConsoleで複数行のJavaScriptコードを入力する際に使用するキーの組み合わ...

問題 6

ReferenceError: undefinedFunction is not...

問題 7

Elementsタブで要素をダブルクリックして編集した変更は、ページを再読み込みするとどうなりますか...

問題 8

DOM(Document Object Model)とは何ですか?

問題 9

以下のコードで、IDがmain-titleの要素を取得するメソッドはどれですか? ...

問題 10

DOMの構造はどのような形で表現されますか?

問題 11

ノードとエレメントの違いについて正しい説明はどれですか?

問題 12

要素のテキスト内容を変更するプロパティはどれですか?

問題 13

開発者ツールでDOMの構造を確認するためのタブはどれですか?

問題 14

以下のコードの実行結果はどうなりますか? javascript const element =...

問題 15

JavaScriptでHTML要素を取得する際、IDを指定して要素を1つ取得するメソッドは何ですか?

問題 16

textContentとinnerHTMLの違いについて正しい説明はどれですか?

問題 17

以下のコードで、2番目の.messageクラス要素を取得するために空欄に入るべきコードは何ですか?...

問題 18

要素の属性を取得する正しい方法はどれですか?

問題 19

querySelectorで要素を取得する際の正しいCSSセレクターの書き方はどれですか?

問題 20

以下のコードを実行した場合、ページ上にはどのように表示されますか? javascript...

問題 21

存在しないIDを指定してgetElementByIdを実行した場合、何が返されますか?

問題 22

JavaScriptでボタンのクリックイベントを処理するために使用するメソッドは何ですか?

問題 23

addEventListenerの第1引数に指定するクリックイベント名は何ですか?

問題 24

以下のコードでボタンがクリックされた時の動作はどうなりますか? javascript let...

問題 25

イベントリスナー関数の引数として渡されるオブジェクトの名前は何ですか?

問題 26

以下のコードでタイトル要素のテキストを変更するために使用しているプロパティは何ですか? ...

問題 27

要素のスタイル(CSS)を変更するために使用するプロパティは何ですか?

問題 28

アロー関数を使ってイベントリスナーを登録する正しい書き方はどれですか?

問題 29

input要素の入力値を取得するために使用するプロパティはどれですか?

問題 30

文字を入力するたびにリアルタイムで処理を実行したい場合、どのイベントを使用しますか?

問題 31

フォーム送信時にページの更新を防ぐために使用するメソッドはどれですか?

問題 32

以下のコードの実行結果はどうなりますか? javascript const ageInput =...

問題 33

changeイベントとinputイベントについて正しい説明はどれですか?

問題 34

以下のコードで空欄に入る適切な処理は何ですか? javascript...

問題 35

文字列として取得した年齢を数値に変換する正しい方法はどれですか?

問題 36

JavaScriptで新しいHTML要素を作成するメソッドは何ですか?

問題 37

作成した要素を既存の要素の子要素として追加するメソッドは何ですか?

問題 38

要素をDOMから削除する従来の方法で使用するメソッドは何ですか?

問題 39

以下のコードを実行すると、DOM構造はどのように変化しますか? javascript const...

問題 40

要素を削除する新しい書き方として使用できるメソッドは何ですか?

問題 41

以下のコードで作成される最終的なDOM構造はどれですか? javascript const...

問題 42

createElement()で作成した要素に対して、テキスト内容を設定するプロパティは何ですか?

問題 43

要素にCSSクラスを追加するために使用するメソッドは何ですか?

問題 44

特定のクラスが要素に存在するかどうかを確認するメソッドは何ですか?

問題 45

クラスの追加と削除を自動で切り替えるメソッドは何ですか?

問題 46

以下のコードの実行結果として正しいものはどれですか? javascript const...

問題 47

要素のスタイルを直接変更するために使用するプロパティは何ですか?

問題 48

以下のコードで、ボタンをクリックするたびに要素の表示・非表示が切り替わる処理を完成させるには、空欄に...

問題 49

CSSクラスを使用してスタイルを変更する方法と、styleプロパティを直接使用する方法の主な違いは何...

💡 学習のコツ

  • • 順番に取り組むことで、段階的に理解を深めることができます
  • • 間違えた問題は解説をしっかり読んで理解しましょう
  • • 全問題完了後、もう一度チャレンジして定着を確認しましょう

📚 学習の進め方

1

問題を順番に解く

基礎から応用へと段階的に構成されているため、順番に取り組むことをお勧めします

2

解説をしっかり読む

正解・不正解に関わらず、解説を読んで理解を深めましょう

3

復習で定着させる

間違えた問題は後日再チャレンジして、知識の定着を確認しましょう

前のトピック

制御構造

次のトピック

非同期処理

さらに効果的な学習を

プレミアムプランでは、進捗管理、間違えた問題の自動復習リスト、詳細な解説動画など、 より充実した学習体験をご利用いただけます。