DOM操作

中級
49
4時間54分

JavaScriptのDOM操作に関する練習問題

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

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

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

javascript icon

練習問題一覧 (49問)

問題 1

`ReferenceError: undefinedFunction is not defined`というエラーメッセージが表示される原因は何ですか?

問題 2

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

問題 3

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

問題 4

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

問題 5

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

問題 6

以下のコードでボタンがクリックされた時の動作はどうなりますか? ```javascript let count = 0; button.addEventListener('click', function() { count = count + 1; console.log(count); }); ```

問題 7

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

問題 8

以下のコードの実行結果はどうなりますか? ```javascript const ageInput = document.getElementById('age'); // ユーザーが "25" を入力した場合 const age = ageInput.value; console.log(typeof age); ```

問題 9

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

問題 10

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

問題 11

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

問題 12

以下のコードで作成される最終的なDOM構造はどれですか? ```javascript const list = document.getElementById('list'); // <ul id="list"></ul> const item1 = document.createElement('li'); item1.textContent = 'アイテム1'; const item2 = document.createElement('li'); item2.textContent = 'アイテム2'; list.appendChild(item1); list.appendChild(item2); ```

問題 13

以下のコードで空欄に入る適切な処理は何ですか? ```javascript form.addEventListener('submit', function(event) { ______; const username = document.getElementById('username').value; if (username === '') { alert('名前を入力してください'); return; } alert('送信完了'); }); ```

問題 14

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

問題 15

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

問題 16

以下のコードを実行すると、DOM構造はどのように変化しますか? ```javascript const list = document.getElementById('list'); const newItem = document.createElement('li'); newItem.textContent = 'アイテム'; list.appendChild(newItem); ```

問題 17

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

問題 18

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

問題 19

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

問題 20

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

問題 21

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

問題 22

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

問題 23

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

問題 24

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

問題 25

以下のコードの実行結果として正しいものはどれですか? ```javascript const element = document.getElementById('test'); element.classList.add('highlight'); element.classList.add('large-text'); console.log(element.className); ```

問題 26

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

問題 27

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

問題 28

以下のコードで、2番目の`.message`クラス要素を取得するために空欄に入るべきコードは何ですか? ```javascript const secondMessage = document.______('.message')[1]; ```

問題 29

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

問題 30

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

問題 31

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

問題 32

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

問題 33

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

問題 34

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

問題 35

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

問題 36

以下のコードでタイトル要素のテキストを変更するために使用しているプロパティは何ですか? ```javascript const title = document.getElementById('title'); button.addEventListener('click', function() { title.______ = '変更されました'; }); ```

問題 37

以下のコードで、ボタンをクリックするたびに要素の表示・非表示が切り替わる処理を完成させるには、空欄に何を入れるべきですか? ```javascript button.addEventListener('click', function() { element.classList.______('hidden'); }); ```

問題 38

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

問題 39

以下のコードでエラーが発生する原因は何ですか? ```javascript var element = document.getElementById("wrong-id"); element.textContent = "テキスト変更"; ```

問題 40

以下のコードで、IDが`main-title`の要素を取得するメソッドはどれですか? ```javascript const titleElement = document.______('main-title'); ```

問題 41

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

問題 42

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

問題 43

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

問題 44

以下のコードの実行結果はどうなりますか? ```javascript const element = document.getElementById('example'); console.log(element.nodeType); ```

問題 45

以下のコードを実行した場合、ページ上にはどのように表示されますか? ```javascript const element = document.getElementById('test'); element.textContent = '<em>強調</em>テキスト'; ```

問題 46

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

問題 47

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

問題 48

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

問題 49

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

💡 学習のコツ

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

📚 学習の進め方

1

問題を順番に解く

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

2

解説をしっかり読む

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

3

復習で定着させる

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

前のトピック

データ構造

次のトピック

エラー処理

さらに効果的な学習を

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