HTML5プロフェッショナル認定試験 レベル2「ブラウザAPI（イベント・DOM・Window・History）」の一問一答

HTML5プロフェッショナル認定試験 レベル2のブラウザAPI（イベント・DOM・Window・History）に関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．addEventListener()の第3引数にtrueを指定すると、イベントはキャプチャフェーズでハンドラが実行される。

   正解：○（正しい）

   解説：第3引数(useCapture)がtrueでキャプチャフェーズ、省略またはfalseでバブリングフェーズに登録される。

2. 問2．イベントの伝播は、キャプチャフェーズ→ターゲットフェーズ→バブリングフェーズの順に行われる。

   正解：○（正しい）

   解説：DOMイベントは祖先から対象へ降りるキャプチャ、ターゲット、対象から祖先へ昇るバブリングの3フェーズで伝播する。

3. 問3．event.stopPropagation()を呼ぶと、同じ要素に登録された他のリスナーも即座に実行されなくなる。

   正解：×（誤り）

   解説：誤り。正しくは、stopPropagation()は伝播を止めるだけで同一要素の他リスナーは実行される。同一要素も止めるのはstopImmediatePropagation()。

4. 問4．event.preventDefault()は、イベントに関連付けられたブラウザの既定動作（フォーム送信やリンク遷移など）をキャンセルする。

   正解：○（正しい）

   解説：preventDefault()は既定動作を抑止するが、イベントの伝播自体は止めない。

5. 問5．querySelectorAll()が返すNodeListは、DOMの変更が即時に反映される動的（live）なコレクションである。

   正解：×（誤り）

   解説：誤り。正しくは、querySelectorAll()が返すNodeListは静的（static）で、取得後のDOM変更は反映されない。

6. 問6．getElementsByClassName()が返すHTMLCollectionは、取得後のDOM変更が反映されない静的なコレクションである。

   正解：×（誤り）

   解説：誤り。正しくは、getElementsByClassNameが返すHTMLCollectionはlive（動的）で、DOMの変更がリアルタイムに反映される。

7. 問7．removeEventListener()でリスナーを削除するには、addEventListener()に渡したものと同一の関数参照を指定する必要がある。

   正解：○（正しい）

   解説：無名関数で登録すると参照が異なり削除できないため、削除予定のリスナーは名前付き関数で登録する。

8. 問8．DOMContentLoadedイベントは、画像やスタイルシートなどすべての外部リソースの読み込み完了後に発火する。

   正解：×（誤り）

   解説：誤り。正しくは、DOMContentLoadedはHTMLの解析とDOM構築完了で発火する。全リソース完了で発火するのはloadイベント。

9. 問9．addEventListenerの第3引数にオプション{once:true}を指定すると、リスナーは一度だけ実行され自動的に削除される。

   正解：○（正しい）

   解説：onceオプションがtrueのリスナーは最初の呼び出し後に自動で除去される。

10. 問10．addEventListenerの{passive:true}オプションを指定したリスナー内でpreventDefault()を呼ぶと、既定動作が確実にキャンセルされる。

    正解：×（誤り）

    解説：誤り。正しくは、passive:trueはpreventDefault()を呼ばない宣言で、呼んでも無効（警告が出る）。スクロール性能向上が目的。

11. 問11．createTextNode()はテキストノードを生成するが、生成しただけではDOMツリーには挿入されない。

    正解：○（正しい）

    解説：createTextNode/createElementは生成するのみで、appendChildやinsertBefore等で明示的に挿入する必要がある。

12. 問12．textContentに文字列を代入すると、その文字列はHTMLとして解釈され子要素が構築される。

    正解：×（誤り）

    解説：誤り。正しくは、textContentは代入文字列をHTMLとして解釈せず、すべて文字として扱う。HTMLを解釈するのはinnerHTML。

13. 問13．innerHTMLに文字列を代入すると、その文字列はHTMLとして解釈され子要素が構築される。

    正解：○（正しい）

    解説：innerHTMLは代入文字列をHTMLパースして子ノードを再構築する。信頼できない入力ではXSSに注意が必要。

14. 問14．classList.toggle('active')は、active クラスの有無にかかわらず常にクラスを追加する。

    正解：×（誤り）

    解説：誤り。正しくは、toggleはクラスが存在すれば削除し、存在しなければ追加する切り替え動作を行う。

15. 問15．setTimeout()のコールバックは、指定ミリ秒が経過すると現在実行中のコードの途中でも割り込んで即座に実行される。

    正解：×（誤り）

    解説：誤り。正しくは、JavaScriptはシングルスレッドで、コールバックは現在の実行完了後コールスタックが空になってから実行される。

16. 問16．location.assign(url)とlocation.replace(url)はどちらも遷移するが、replace()は履歴に残さず戻るボタンで前のページに戻れない。

    正解：○（正しい）

    解説：assign()は履歴に追加、replace()は現在の履歴エントリを置換するため戻れない。

17. 問17．history.pushState()でURLを変更すると、ページ全体の再読み込みが発生する。

    正解：×（誤り）

    解説：誤り。正しくは、pushStateは再読み込みなしで履歴エントリとURLを追加する。これによりSPA等でURLを更新できる。

18. 問18．popstateイベントは、ユーザーが戻る/進むボタンを操作して履歴エントリが変化したときに発火する。

    正解：○（正しい）

    解説：popstateはアクティブな履歴エントリが変化（back/forward等）したとき発火する。pushState/replaceState自体では発火しない。

19. 問19．history.go(-2)は履歴を2つ前のページに移動する。

    正解：○（正しい）

    解説：go(n)は相対移動でnが負なら戻る、正なら進む。go(-2)は2つ前へ移動する。

20. 問20．dispatchEvent()はイベントの既定動作を抑止するためのメソッドである。

    正解：×（誤り）

    解説：誤り。正しくは、dispatchEvent()はスクリプトからイベントを発火させるメソッド。既定動作抑止はpreventDefault()。

21. 問21．イベント委任（delegation）は、共通の親要素に1つリスナーを付けてイベントのバブリングを利用する手法である。

    正解：○（正しい）

    解説：親要素でバブリングを捕捉しevent.targetで発生元を判別する。動的に追加される子にも対応でき効率的。

22. 問22．changeイベントは、テキスト入力欄でキーを押すたびにリアルタイムで発火する。

    正解：×（誤り）

    解説：誤り。正しくは、changeは値が確定（フォーカスを外す等）したときに発火する。一文字ごとに発火するのはinput。

23. 問23．submitイベントはform要素で発生し、preventDefault()でフォーム送信を中止できる。

    正解：○（正しい）

    解説：submitイベントはフォーム送信時に発火し、preventDefault()で既定の送信処理を抑止できる。

24. 問24．node.children は要素ノードのみを返すが、node.childNodes はテキストノードやコメントノードも含めて返す。

    正解：○（正しい）

    解説：childrenは要素ノード（HTMLCollection）のみ、childNodesは全ノード種別（NodeList）を含む。

25. 問25．element.firstChild は最初の子要素ノードを必ず返す。

    正解：×（誤り）

    解説：誤り。正しくは、firstChildは最初の子ノードでありテキストノードや空白を返すことがある。最初の子要素はfirstElementChild。

26. 問26．data-user-id 属性は、JavaScriptから element.dataset.userId としてアクセスできる。

    正解：○（正しい）

    解説：data-*属性はdatasetでアクセスし、ハイフン区切りはキャメルケース（user-id→userId）に変換される。

27. 問27．window.alert()は実行されると、ユーザーがダイアログを閉じるまでスクリプトの実行をブロックする。

    正解：○（正しい）

    解説：alert/confirm/promptは同期的にユーザー応答を待ち、その間スクリプト実行を停止する。

28. 問28．confirm()はユーザーがOKを押すとfalse、キャンセルを押すとtrueを返す。

    正解：×（誤り）

    解説：誤り。正しくは、confirm()はOKでtrue、キャンセル/閉じるでfalseを返す。

29. 問29．setInterval()で開始した繰り返し処理を停止するには、clearTimeout()を使う。

    正解：×（誤り）

    解説：誤り。正しくは、setIntervalの停止はclearInterval()を使う。clearTimeoutはsetTimeout用。

30. 問30．insertBefore(newNode, referenceNode)は、referenceNodeの直前にnewNodeを挿入する。

    正解：○（正しい）

    解説：insertBeforeは参照ノードの前に新ノードを挿入する。参照ノードにnullを渡すと末尾に追加される。

31. 問31．location.search には、URLのパス部分（ドメイン以降のディレクトリパス）が含まれる。

    正解：×（誤り）

    解説：誤り。正しくは、location.searchは「?」以降のクエリ文字列。パス部分はlocation.pathname。

32. 問32．keydownイベントはキーを押した瞬間に、keyupイベントはキーを離した瞬間に発火する。

    正解：○（正しい）

    解説：keydownは押下時、keyupは離す時に発火する。修飾キー等も検出できる。

33. 問33．window.postMessage()は、同一オリジンのウィンドウ間でしかデータをやり取りできない。

    正解：×（誤り）

    解説：誤り。正しくは、postMessageはクロスオリジン（異なるオリジン）のウィンドウ/iframe間でも通信できる。

34. 問34．getAttribute()は属性が存在しない場合に空文字列('')を返す。

    正解：×（誤り）

    解説：誤り。正しくは、getAttribute()は存在しない属性に対してnullを返す。

35. 問35．appendChild()で、すでにDOM内に存在するノードを別の親に追加すると、元の位置からは削除され移動する。

    正解：○（正しい）

    解説：既存ノードをappendChildすると複製ではなく移動になり、元の場所から取り除かれる。

36. 問36．history.replaceState()は新しい履歴エントリを追加せず、現在のエントリを置き換える。

    正解：○（正しい）

    解説：replaceStateは履歴を増やさず現在のURL/状態を上書きする。pushStateは新規エントリを追加する。

37. 問37．innerTextはCSSの表示状態を無視し、display:noneで非表示の要素のテキストも取得する。

    正解：×（誤り）

    解説：誤り。正しくは、innerTextはレンダリング結果に基づき非表示テキストを除外する。表示状態を無視するのはtextContent。

38. 問38．DOMのノードタイプで、要素ノードのnodeTypeは1、テキストノードのnodeTypeは3である。

    正解：○（正しい）

    解説：nodeTypeは要素ノードが1、テキストノードが3、コメントが8、Documentが9である。

39. 問39．prompt()はユーザーがキャンセルした場合、空文字列('')を返す。

    正解：×（誤り）

    解説：誤り。正しくは、prompt()はキャンセル時にnullを返す。入力せずOKしたときは空文字列を返す。

40. 問40．mouseoverイベントはバブリングしないが、mouseenterイベントはバブリングする。

    正解：×（誤り）

    解説：誤り。正しくは、mouseoverはバブリングし、mouseenterはバブリングしない。

41. 問41．次のコードの実行後、コンソールに出力される順序として正しいものはどれか。 console.log('A'); setTimeout(()=>console.log('B'),0); console.log('C');

    • ア．A → C → B
    • イ．A → B → C
    • ウ．B → A → C
    • エ．C → A → B

    正解：ア．A → C → B

    解説：同期処理A,Cが先に実行され、setTimeoutのコールバックBはスタックが空になってから実行される。

42. 問42．addEventListener()の第2引数に渡すものとして正しいのはどれか。

    • ア．イベント発生時に実行する関数（リスナー）
    • イ．イベントの種類を表す文字列
    • ウ．キャプチャ/バブリングの真偽値
    • エ．対象要素のセレクタ文字列

    正解：ア．イベント発生時に実行する関数（リスナー）

    解説：第2引数はイベント発生時に呼ばれるコールバック関数（リスナー）である。

43. 問43．location.pathname の値はどれか。location.href='https://example.com/page?q=1#sec' のとき。

    • ア．'/page'
    • イ．'/page?q=1'
    • ウ．'example.com/page'
    • エ．'?q=1'

    正解：ア．'/page'

    解説：pathnameはドメイン以降のパス部分を返すため'/page'となる。

44. 問44．親div→子buttonの構造で親divにclickリスナーを付け、子buttonをクリックすると親のリスナーが動く理由はどれか。

    • ア．イベントのバブリングによる
    • イ．イベントのキャプチャによる
    • ウ．preventDefaultの影響
    • エ．イベント委任が無効だから

    正解：ア．イベントのバブリングによる

    解説：子のクリックイベントがバブリングフェーズで親へ伝播し、親のリスナーが実行される。

45. 問45．parent.insertBefore(newNode, null) を実行した場合の挙動はどれか。

    • ア．親の子の末尾に挿入される
    • イ．エラーになる
    • ウ．親の子の先頭に挿入される
    • エ．何も起きない

    正解：ア．親の子の末尾に挿入される

    解説：参照ノードがnullの場合、newNodeは親の子の末尾に挿入される（appendChild相当）。

46. 問46．document.getElementById('x') が一致する要素を見つけられなかった場合の戻り値はどれか。

    • ア．null
    • イ．undefined
    • ウ．空のNodeList
    • エ．空文字列

    正解：ア．null

    解説：getElementByIdは未一致時にnullを返す。

47. 問47．btnにキャプチャ(true)で'cap'、バブリング(false)で'bub'リスナーを順に登録しbtn自身をクリックした出力順はどれか。

    • ア．cap → bub
    • イ．bub → cap
    • ウ．capのみ
    • エ．bubのみ

    正解：ア．cap → bub

    解説：ターゲット要素自身では登録順に実行される。capが先に登録されているのでcap→bubとなる。

48. 問48．parent の全子ノードを取り除く一般的な方法として正しいものはどれか。

    • ア．parent.innerHTML = ''
    • イ．parent.clear()
    • ウ．parent.empty()
    • エ．parent.children = []

    正解：ア．parent.innerHTML = ''

    解説：parent.innerHTML='' で子ノードをまとめて除去できる。clear/emptyメソッドはDOMに存在しない。

49. 問49．要素のclass属性に含まれる特定のクラスの有無を真偽値で調べるメソッドはどれか。

    • ア．classList.has()
    • イ．classList.contains()
    • ウ．classList.includes()
    • エ．classList.exists()

    正解：イ．classList.contains()

    解説：classList.contains('x')はクラスxが存在すればtrueを返す。

50. 問50．screen.width / screen.height が示すものとして正しいのはどれか。

    • ア．ブラウザ表示領域(viewport)のサイズ
    • イ．ユーザーの画面（モニタ）のサイズ
    • ウ．ドキュメント全体のサイズ
    • エ．ウィンドウの内寸

    正解：イ．ユーザーの画面（モニタ）のサイズ

    解説：screenオブジェクトはユーザーの画面（モニタ）の幅・高さを示す。

51. 問51．popstateイベントが発火するのは次のうちどの場合か。

    • ア．pushState()を呼んだとき
    • イ．ユーザーが戻る/進むボタンを押したとき
    • ウ．replaceState()を呼んだとき
    • エ．ページを初回ロードしたとき

    正解：イ．ユーザーが戻る/進むボタンを押したとき

    解説：popstateはback/forward等でアクティブな履歴エントリが変化したときに発火する。pushState自体では発火しない。

52. 問52．event.preventDefault() が効果を持つ典型的な場面はどれか。

    • ア．親要素への伝播を止めたいとき
    • イ．aタグのclickでページ遷移を止めたいとき
    • ウ．同一要素の他リスナーを止めたいとき
    • エ．イベントを再発火したいとき

    正解：イ．aタグのclickでページ遷移を止めたいとき

    解説：リンクのclickやフォームのsubmitなど既定動作のあるイベントで、その動作を抑止する。

53. 問53．addEventListenerのoptionsで指定でき、スクロール性能向上のためpreventDefaultを呼ばないことを宣言するものはどれか。

    • ア．capture
    • イ．passive
    • ウ．once
    • エ．signal

    正解：イ．passive

    解説：passive:trueはpreventDefaultを呼ばない約束で、ブラウザがスクロールを先行処理でき性能が向上する。

54. 問54．querySelectorAll('.item') と getElementsByClassName('item') の違いとして正しいものはどれか。

    • ア．前者は動的、後者は静的
    • イ．前者は静的NodeList、後者は動的HTMLCollection
    • ウ．どちらも動的
    • エ．どちらも静的

    正解：イ．前者は静的NodeList、後者は動的HTMLCollection

    解説：querySelectorAllは静的NodeList、getElementsByClassNameは動的HTMLCollectionを返す。

55. 問55．ドラッグ&ドロップでdropイベントを発火させるために必要な処理はどれか。

    • ア．dragstartでstopPropagation()
    • イ．dragoverでpreventDefault()
    • ウ．dropでpreventDefault()
    • エ．dragendでreturn false

    正解：イ．dragoverでpreventDefault()

    解説：dragoverでpreventDefault()しないとドロップが許可されずdropイベントは発火しない。

56. 問56．ul に既存のli が3個ある状態で新しく作ったli を ul.appendChild した後の子li の数はどれか。

    • ア．3
    • イ．4
    • ウ．1
    • エ．0

    正解：イ．4

    解説：既存3個に新規1個を末尾追加するので合計4個になる。

57. 問57．window.scrollTo(0, 0) の動作として正しいものはどれか。

    • ア．ページを1画面分下にスクロール
    • イ．ページ最上部へスクロール
    • ウ．スクロール位置を取得
    • エ．スクロールを禁止する

    正解：イ．ページ最上部へスクロール

    解説：scrollTo(x,y)はドキュメントを指定座標へスクロールする。(0,0)はページ最上部。

58. 問58．querySelectorAll('div')で取得したNodeListをループ処理中にdiv要素を追加した場合の挙動として正しいものはどれか。

    • ア．追加された要素もループで処理される
    • イ．ループ中にエラーが発生する
    • ウ．追加された要素は処理されない
    • エ．NodeListが自動的に再評価される

    正解：ウ．追加された要素は処理されない

    解説：querySelectorAllのNodeListは静的なので、取得後に追加した要素はループ対象に含まれない。

59. 問59．同一要素の同じイベントに複数のリスナーが登録されているとき、現在のリスナー以降の実行も止めるメソッドはどれか。

    • ア．stopPropagation()
    • イ．preventDefault()
    • ウ．stopImmediatePropagation()
    • エ．cancelBubble()

    正解：ウ．stopImmediatePropagation()

    解説：stopImmediatePropagation()は伝播に加え、同一要素の後続リスナーの実行も止める。

60. 問60．次のうち、HTMLの解析完了（DOM構築完了）時点で発火し、画像等の読み込みを待たないイベントはどれか。

    • ア．load
    • イ．beforeunload
    • ウ．DOMContentLoaded
    • エ．readystatechange

    正解：ウ．DOMContentLoaded

    解説：DOMContentLoadedはDOM構築完了で発火し、画像等の外部リソースを待たない。

61. 問61．location.search の値はどれか。location.href='https://example.com/page?q=1#sec' のとき。

    • ア．'#sec'
    • イ．'/page'
    • ウ．'?q=1'
    • エ．'q=1#sec'

    正解：ウ．'?q=1'

    解説：searchは「?」以降のクエリ文字列を返すため'?q=1'となる。

62. 問62．data-price='100' 属性を持つ要素 el から値を取得する方法として正しいものはどれか。

    • ア．el.data.price
    • イ．el.getData('price')
    • ウ．el.dataset.price
    • エ．el.attr.price

    正解：ウ．el.dataset.price

    解説：data-*属性はel.dataset.priceでアクセスし、文字列'100'が得られる。

63. 問63．setInterval(fn, 1000) の戻り値の用途として正しいものはどれか。

    • ア．実行回数のカウント
    • イ．コールバックの戻り値
    • ウ．clearIntervalで停止するためのタイマーID
    • エ．経過ミリ秒

    正解：ウ．clearIntervalで停止するためのタイマーID

    解説：setIntervalはタイマーIDを返し、clearInterval(id)で停止に使う。

64. 問64．box.innerHTML = '<b>Hi</b>' の後に box.textContent を参照したときの値はどれか。

    • ア．'<b>Hi</b>'
    • イ．''
    • ウ．'Hi'
    • エ．'&lt;b&gt;Hi&lt;/b&gt;'

    正解：ウ．'Hi'

    解説：innerHTMLで<b>Hi</b>が解釈され、textContentはタグを除いたテキスト'Hi'を返す。

65. 問65．box.textContent = '<b>Hi</b>' を実行した場合、画面にはどう表示されるか。

    • ア．太字のHi
    • イ．Hi（タグは消える）
    • ウ．<b>Hi</b> という文字列
    • エ．何も表示されない

    正解：ウ．<b>Hi</b> という文字列

    解説：textContentはHTMLとして解釈せず、'<b>Hi</b>'がそのまま文字として表示される。

66. 問66．element.style から取得できるスタイルとして正しいものはどれか。

    • ア．外部CSSで指定された全スタイル
    • イ．ブラウザのデフォルトスタイル
    • ウ．インラインstyle属性で設定された値
    • エ．計算済みの最終スタイル

    正解：ウ．インラインstyle属性で設定された値

    解説：element.styleはインラインstyle属性のみを反映する。計算後の値はgetComputedStyle()を使う。

67. 問67．document.createElement('p')の実行直後の状態として正しいものはどれか。

    • ア．p要素が生成されbody末尾に挿入される
    • イ．文字列'<p></p>'が返される
    • ウ．既存のp要素への参照が返される
    • エ．p要素が生成されるがDOMツリーには未挿入

    正解：エ．p要素が生成されるがDOMツリーには未挿入

    解説：createElementはp要素ノードを生成するが、DOMツリーには未挿入で別途追加が必要。

68. 問68．history APIで、ページを再読み込みせずに新しい履歴エントリとURLを追加するメソッドはどれか。

    • ア．history.go()
    • イ．history.forward()
    • ウ．location.assign()
    • エ．history.pushState()

    正解：エ．history.pushState()

    解説：pushState(state,title,url)は再読み込みせず履歴とURLを追加する。

69. 問69．次のうち、テキスト入力欄で一文字入力するたびにリアルタイムで発火するイベントはどれか。

    • ア．change
    • イ．focus
    • ウ．blur
    • エ．input

    正解：エ．input

    解説：inputイベントは値が変わるたびに即時発火する。changeは確定時のみ。

70. 問70．次のうち、バブリングしない（bubblesしない）イベントはどれか。

    • ア．click
    • イ．mouseover
    • ウ．input
    • エ．mouseenter

    正解：エ．mouseenter

    解説：mouseenter/mouseleaveはバブリングしない。mouseover/click/inputはバブリングする。

71. 問71．イベント委任を使う主な利点として最も適切なものはどれか。

    • ア．キャプチャフェーズを強制できる
    • イ．preventDefaultが不要になる
    • ウ．イベントの発火が高速化する
    • エ．動的に追加される子にも対応でき、リスナー数を減らせる

    正解：エ．動的に追加される子にも対応でき、リスナー数を減らせる

    解説：親に1つのリスナーを置けば、動的に追加された子要素にも対応でき効率的。

72. 問72．window.location.replace('/login') を呼んだ後の挙動として正しいものはどれか。

    • ア．新しいタブで開く
    • イ．履歴に追加され戻れる
    • ウ．ページが再読み込みされるだけ
    • エ．履歴を置換し戻るボタンで前ページに戻れない

    正解：エ．履歴を置換し戻るボタンで前ページに戻れない

    解説：replace()は現在の履歴を置換するため、遷移先で戻るボタンを押しても元のページに戻れない。

73. 問73．let n=0; const id=setInterval(()=>{n++; if(n===3) clearInterval(id);},10); 十分時間経過後の n はどれか。

    • ア．2
    • イ．4
    • ウ．無限に増える
    • エ．3

    正解：エ．3

    解説：n===3でclearIntervalするため、nが3に達した時点で停止し最終値は3。

74. 問74．次のうち、ページ離脱直前に確認等を行うために使われるイベントはどれか。

    • ア．unloaded
    • イ．exit
    • ウ．pagestop
    • エ．beforeunload

    正解：エ．beforeunload

    解説：beforeunloadはページ離脱前に発火し、確認ダイアログ表示などに使う。

75. 問75．btn.addEventListener('click',f,{once:true}); を登録しbtnを2回クリックしたとき f が実行される回数はどれか。

    • ア．0回
    • イ．2回
    • ウ．無限
    • エ．1回

    正解：エ．1回

    解説：once:trueのリスナーは最初の呼び出し後に削除されるため、2回クリックしても1回だけ実行される。