Question

例題2.27「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
document.getElementsByClassName()とdocument.querySelector()の違いについて正しく説明しているものをすべて選択しなさい。

document.getElementsByClassName()内にクラス名を記述することで、該当するDOM要素をすべて取得することができる。
document.querySelector()では該当するDOM要素をすべて取得することができる。
document.getElementsByClassName()は取得したときのDOM要素数を保持し、後から変化した場合でもDOM要素を自動的に更新して取得しない。
document.querySelector()では半角スペースでクラス名を区切ることで、親子関係を考慮したDOM要素を取得することができる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年6月17日

答えはこちら

例題2.26「2.2.5 History API」

レベル2の出題範囲「2.2.5 History API」からの出題です。
HistoryAPIにおいて、ブラウザーの「戻る」または「進む」やそれに類する操作が行われた際に検知するためのイベントとして正しいものはどれか？

state
go
popState
pageState

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年6月3日

答えはこちら

例題2.25「2.2.1 イベント」

レベル2の出題範囲「2.2.1 イベント」からの出題です。
スマートフォンにおけるタッチ関連のイベントで正しいものを選択しなさい。

touchstartでタッチ開始を示す
touchdragでタッチ中を示す
touchesでタッチ開始を示す
tapでタッチの開始と終了を示す

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年4月15日

答えはこちら

例題2.24「2.2.3 ウィンドウオブジェクト」

レベル2の出題範囲「2.2.3 ウィンドウオブジェクト」からの出題です。
setIntervalについて正しいものをすべて選択しなさい。

指定したミリ秒後に指定した関数を1度だけ実行する
指定したミリ秒ごとに指定した関数を実行する
1度開始したらブラウザーが閉じるまで関数を実行し続ける
処理が完了しない場合でも、指定したミリ秒が経過すると関数が実行されることがある

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年3月19日

答えはこちら

例題2.22「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
HTML要素に任意のclass「text」を付与したい。要望をかなえることのできるJavaScriptのコードとして正しいものはどれか？

let dom = document.querySelector(‘p’);
dom.classList.add(‘text’);
let dom = document.querySelectorAll(‘p’).classList.add(‘text’);
document.querySelector(‘p’).addClass(‘text’);
let dom = document.querySelectorAll(‘p’);
dom.hasClass.addClass(‘text’);

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年1月8日

答えはこちら

例題2.21「2.2.4 Selectors API」

レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のHTMLから、要素Aと書かれたli要素を取得するスクリプトとして、適切なものを全て選択しなさい。


<div class="article">
  <div class="article__title"></div>
  <ul class="article__list list">
    <li class="list__item" id="articleA">要素A</li>
    <li class="list__item" id="articleB">要素B</li>
    <li class="list__item" id="articleC">要素C</li>
  </ul>
</div>

<div class="ad">
  <div class="ad__title"></div>
  <ul class="ad__list list">
    <li class="list__item" id="adD">要素D</li>
    <li class="list__item" id="adE">要素E</li>
    <li class="list__item" id="adF">要素F</li>
  </ul>
</div>

document.getElementById('articleA');
document.querySelector('#articleA');
document.querySelector('.list .list__item:first-child');
document.querySelector('.article .list__item:first-of-type');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年8月8日

答えはこちら

例題2.20「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
以下のスクリプトを実行した後で、"btn"クラスがついたボタンをクリックすると、そのボタンへ新たに"btn--clicked"クラスを追加するようにしたい。以下の(1)に入るものとして適切なものを選びなさい。


var btn = document.querySelector('.btn');

btn.addEventListener('click', function(){
   (1)
});

btn.addClass('btn--clicked');
btn.setAttribute('class', 'btn--clicked');
btn.className = 'btn--clicked';
btn.classList.add('btn--clicked');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年6月17日

答えはこちら

例題2.19「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
以下のHTML要素に、width属性を追加したい。正しくない記述を選択しなさい。


<img id="pic" src="image.png">

document.getElementById('pic').setAttribute('width',100);
var attr = document.createAttribute('width');
attr.value = 100;
document.getElementById('pic').setAttributeNode(attr);
document.getElementById('pic').addAttribute('width',100);
document.getElementById('pic').setAttribute('width','100');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年3月5日

答えはこちら

例題2.18「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
HTML要素のオブジェクトから指定した属性を削除するメソッドを選択しなさい。

removeAttribute()
deleteAttribute()
spliceAttribute()
reduceAttribute()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年11月6日

答えはこちら

例題2.17「2.2.1 イベント」

レベル2の出題範囲「2.2.1 イベント」からの出題です。
以下のスクリプトを実行した後で、customEventイベントを発生させるにはどのようにすれば良いか。正しい選択肢を選びなさい。


var btn = document.getElementById('btn');
btn.addEventListener('customEvent',function(){
  alert('customEvent');
});

btn.click();
btn.dispatchEvent(new Event('customEvent'));
ボタンをクリックする。
btn.dispatchEvent('customEvent');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年9月20日

答えはこちら

例題2.16「2.2.3 ウィンドウオブジェクト」

レベル2の出題範囲「2.2.3 ウィンドウオブジェクト」からの出題です。
メッセージと共に「OK」、「キャンセル」のボタンを表示し、ユーザがどちらを選択したか取得したい。使用するメソッドはどれか正しいものを選択しなさい。

prompt
alert
submit
confirm

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年7月31日

答えはこちら

例題2.15「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。
以下のHTMLに対してスクリプトを実行した際に、変数resultの値として正しいものを選択しなさい。


【HTML】
<img id="im" src="img.jpg">

【script】
var result = document.getElementById("im").hasAttribute("src");

true
false
"img.jpg"
"src"

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年7月3日

答えはこちら

例題2.14「2.2.1 イベント」

レベル2の出題範囲「2.2.1 イベント」からの出題です。
下記のフォームを使用してユーザーが送信した際に入力の不備で送信に失敗したらスクリプトを実行したい。
イベントハンドラを設定するのに最も適切な要素とイベント名の組み合わせを選択しなさい。


<form id="form" method="post" action="contact.php">
      <input id="mesg" name="message" type="text" required>
      <input id="submit" type="submit" value="送信">
</form>

form要素のonerrorイベント
input type="text"要素のoninvalidイベント
input type="submit"要素のonsenderrorイベント
form要素のoninvalidイベント

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年6月19日

答えはこちら

例題2.13「2.2.6 テスト・デバッグ」

レベル2の出題範囲「2.2.6 テスト・デバッグ」からの出題です。
JavaScript プロファイラに関する記述として正しいものをすべて選びなさい。

記録中のプロファイル名に一致する名称を Console.profileEnd() に渡すと、そのプロファイルを終了します。
記録中のプロファイル名に一致しない名称を Console.profileEnd() に渡すと、直近に開始したプロファイルを終了します。
Console.profileStart() を呼び出すとパフォーマンスプロファイルの記録を開始します。
Console.profileEnd() を呼び出すと、記録を終了します。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.12「2.2.4 Selectors API」

レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のコードを実行した結果として正しいものを選びなさい。


<!DOCTYPE html>
<html>
   <head> 
   <meta charset="UTF-8">  
   </head>
<body>
<div>
       <p class="currencymark"> 200</p>
       <p class="currencymark"> 200</p>
       <p class="currencymark"> 200</p>
</div>
<style>
      p::before{
          content: "JPY";
          font-size: 1.0em
      }
</style>
<script>
     var price = document.querySelector('p.::before');
     for(var i=0;i<price.length;i++){
         price[i].innerHTML="USD";
     }
</script>
</body>
</html>

USD 200
JPY 200
JPY 200
USD 200
USD 200
USD 200
JPY 200
JPY 200
JPY 200
何も表示されない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.11「2.2.5 History API」

レベル2の出題範囲「2.2.5 History API」からの出題です。
ブラウザの履歴から現在のドキュメントを取り除き、新しいドキュメントを表示したい。以下のLocationのメソッドのうち最も適切なものを選びなさい。

assign()
reload()
replace()
push()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.10「2.2.1 イベント」

レベル2の出題範囲「2.2.1 イベント」からの出題です。
以下のコードで Yellowという文字をマウスでクリックした場合表示がどのようになるか正しいものを選びなさい。


<!DOCTYPE html>
<html>
   <head> 
   <meta charset="UTF-8">  
    <script>
        window.onload = function() {
            document.getElementById('A').addEventListener('click',function() {
                text=document.getElementById('A')
                text.innerHTML= "Blue is Clicked</p>";
            },false)
            document.getElementById('B').addEventListener('click',function() {
                text=document.getElementById('B')
                text.innerHTML= "Green is Clicked";
            },false)
            document.getElementById('C').addEventListener('click',function() {
                text=document.getElementById('C')
                text.innerHTML= "Red is Clicked";            
            },false)
            document.getElementById('D').addEventListener('click',function() {
                text=document.getElementById('D')
                text.innerHTML= "Yellow is Clicked";
            },false)
        }
    </script>  
   </head>
   
    <body>
   　<div id ='A'>
     Blue 
       　<div id = 'B'>
           　Green 
       　</div>
       　<div id = 'C'>
           　Red
       　</div>        
   　</div>
   　<div id = 'D'>
     Yellow
   　</div>
   </body>
</html>

Blue
Green
Red
Yellow
Blue
Green
Red
Yellow is Clicked
Blue is Clicked
Green is Clicked
Red is Clicked
Yellow is Clicked
Blue is Clicked
Yellow

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.9「2.2.5 History API」

レベル2の出題範囲「2.2.5 History API」からの出題です。
History APIのpushStateメソッドを使用して、存在しないWebページのURLをスタックに追加した場合の結果を選択しなさい。

JavaScriptのエラーになり、404 Not Foundと表示される
JavaScriptのエラーになるが、現在のページが表示されたままになる
アドレスバーに指定したURLが表示され、404 Not Foundというページが表示される
何も変化しない
アドレスバーに指定したURLが表示され、現在のページが表示されたままになる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.8「2.2.5 History API」

レベル2の出題範囲「2.2.5 History API」からの出題です。
現在の画面から、ブラウザの戻るボタンや履歴によるフォーム入力画面への遷移を無効にしたい。
有効な手段を全て選択しなさい。
ただし、画面遷移はA（前の画面）→B（フォーム入力画面）→C（現在の画面）となっていることとし、prevurlにはA（前の画面）のURL、nexturlにはC（現在の画面）のURLが格納されているものとする。

現在の画面でhistory.pushState()を用いてダミーの履歴を作成し、onpopstateイベントハンドラを用いてダミーの履歴に戻るようにする。
フォーム入力画面をロードする時に window.history.forward() が実行される様にする。
フォーム入力画面から遷移する時に window.history.replaceState(prevurl) が実行される様にする。
フォーム入力画面から遷移する時に window.location.replace(nexturl); を利用する。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.7 「2.2.6 テスト・デバッグ」

レベル2の出題範囲「2.2.6 テスト・デバッグ」からの出題です。
JavaScriptで、コンソールに指定したDOMオブジェクトをXML/HTMLで表示するメソッドを選択しなさい。

Console.log();
Console.dir();
Console.dirxml();
Console.element();
Console.dump();

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.6 「2.2.4 Selectors API」

レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のHTMLにおける、スクリプトの実行結果を選択しなさい。


<div id="elm">
 <p<HTML5</p>
</div>

document.querySelector('#elm a');

エラーが発生する
{ }
undefined
null
[ ]

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.5 「2.2.4 Selectors API」

レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
以下のHTML中の "ul要素内のli要素" 全てを選択するためのスクリプトを選択しなさい。


<ol>
  <li>ABC</li>
  <li>DEF</li>
</ol>
<ul>
  <li>GHI</li>
  <li>JKL</li>
</ul>

document.getElementsByTagName('li');
document.getElementsByQuery('ul li');
document.querySelector('ul li');
document.querySelectorAll('ul li');

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.4 「2.2.3 ウィンドウオブジェクト」

レベル2の出題範囲「2.2.3 ウィンドウオブジェクト」からの出題です。
クロスドメインで呼び出したウィンドウとメッセージをやりとりしたい。
セキュリティ上、有効な実装を全て選択しなさい。

呼び出し元からのpostMessageメソッド呼び出しにおいて、呼び出し先のドキュメントを一つに特定するために、第二引数にURLをパスまで指定する。
呼び出されたウィンドウにおいて、呼び出し元をチェックするために、messageイベントハンドラの引数のoriginプロパティを利用する。
呼び出されたウィンドウにおいて、呼び出し元をチェックするために、messageイベントハンドラの引数のsourceプロパティを利用する。
やりとりするメッセージの中において、互いに信頼できる情報を含める。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.3 「2.2.2 ドキュメントオブジェクト／DOM」

レベル2の出題範囲「2.2.2 ドキュメントオブジェクト／DOM」からの出題です。

下記の記述にあるinput要素を変更してユーザによる値の変更を抑制したい。

変更後の結果として、レイアウトや機能に影響を与えずに実現可能しているものを全て選択しなさい。

    
    A. <input class="test" type="text" value="test" style="display:none">
     <div class="test">test</div>
    
    B. <input class="test" type="text" value="test" style="visibility:hidden">
     <div class="test">test</div>
    
    C. <input class="test" type="text" value="test" disabled="disabled">
    
    D. <input class="test" type="hidden" value="test">
     <div class="test">test</div>

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.2「2.2.6 テスト・デバッグ」

レベル2の出題範囲「2.2.6 テスト・デバッグ」からの出題です。
DOMオブジェクトを引数とした時に、オブジェクトのプロパティを表示するconsoleオブジェクトのメソッドを一つ選びなさい。

dir
log
dirxml
profile

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.1「2.2.1 イベント」

レベル2の出題範囲「2.2.1 イベント」からの出題です。
以下のイベントハンドラのうち、documentオブジェクトでサポートされているものを全て選択しなさい。

onload
onunload
onbeforeunload
onloadstart

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

Answer 1

答え A、D: document.getElementsByClassName()やdocument.querySelectorAll()を使うことで、指定したクラス名に該当するDOM要素をすべて取得することが可能ですが、document.querySelector()では該当するDOM要素の最初のものだけ取得できます。そのためBは間違いです。
document.getElementsByClassName()は後からDOM要素が変化した場合、DOM要素を自動的に更新して取得します。document.querySelector()では、更新されません。
document.querySelector()では、クラス名を半角スペースで区切ることで、親子関係を考慮したDOM要素を取得できます。

HTML5プロフェッショナル認定試験レベル2 例題解説

2.2 WebブラウザにおけるJavaScript API

メルマガ登録E-mail Magazine

ご提供いただく個人情報の取り扱いについて