SCR21: DOM（ドキュメント・オブジェクト・モデル）を用いて、ページにコンテンツを追加する

この実装方法の目的は、document.write又はobject.innerHTMLの代わりにDocument Object Model (DOM)の機能を用いて、ページ中にコンテンツを追加することである。document.write()メソッドはXHTMLで正しいMIMEタイプ(application/xhtml+xml)が指定されているときに動作せず、innerHTMLプロパティはDOMの仕様ではないため利用すべきでない。もしDOMの機能を利用してコンテンツを追加すれば、ユーザーエージェントはDOMにアクセスしてコンテンツを取り込むことができる。createElement()関数を使ってDOMの中に要素を作成することもできる。createTextNode()は要素に関連付けられたテキストを作成するのに用いられる。appendChild()、 removeChild()、 insertBefore()及びreplaceChild()関数は、要素やノードを追加したり削除したりするのに用いられる。その他のDOM関数は、作成された要素に属性を与えるときに使用される。

注記：フォーカス可能な要素を文書に追加するとき、tabindex属性を用いて明示的なタブ順序を指定してはならない。なぜなら、文書の中央にフォーカス可能な要素を追加するときに問題が発生するからである。tabindex属性を明示的に設定しないことで、デフォルトのタブ順序が新しい要素に割り当てられるようにする。

この例では、クライアントサイドスクリプトの使用法として、フォームの検証方法を紹介している。もしエラーがみつかれば、適切なエラーメッセージが表示される。この例ではDOM関数を使用し、タイトル、エラーに関する短い説明、及びエラー一覧の順序付リストを含むエラー通知を追加している。タイトルの内容はリンクとして書かれているので、focusメソッドを使って利用者の注意をエラーに向けることができる。個別のリスト項目もまた、リンクとして書かれているので、そのリンク先に移動したときにエラーのあるフォームのフィールドにフォーカスできるように書かれている。

この例では、簡単にするために二つのテキストフィールドだけを検証しているが、一般的なフォームハンドラにするために容易に拡張することができる。クライアントサイドの検証は、それを唯一の検証とすべきではなく、サーバーサイドの検証でも確認するべきである。クライアントサイドでの検証の利点は、利用者にすぐにフィードバックを提供することで、サーバーからエラーが帰ってくるまでの間、彼らを待たせることがないこと、及びサーバーへの余計なトラフィックを軽減できることである。

次の例はフォームにイベント・ハンドラを追加するスクリプトである。もしスクリプトが有効であれば、サーバーにフォームが送信される前にvalidateNumbers()関数がクライアントサイドの検証のために呼び出される。もしスクリプトが有効でなければ、フォームはすぐにサーバー側に送信されるので、検証機能はサーバーにも実装されるべきである。

コード例：


window.onload = initialise;
function initialise()
{
  // 標準に準拠したユーザーエージェントが対象
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;

  // フォームにイベントハンドラを付加
  var objForm = document.getElementById('numberform');
  objForm.onsubmit= function(){return validateNumbers(this);};
}

次の例はvalidationの機能である。エラーメッセージの要素を作成するためにcreateElement()、createTextNode()、及びappendChild() DOM関数を使用しているところに注目して欲しい。

コード例：


function validateNumbers(objForm)
{
  // フィールドを検証
  var bFirst = isNumber(document.getElementById('num1').value);
  var bSecond = isNumber(document.getElementById('num2').value);
  // 問題がある場合、エラーを表示
  if (!bFirst || !bSecond)
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h2');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // 見出し要素にリンクを含めることによって、スクリーンリーダーは
    // フォーカスを置くことができる － そのリンク先はエラー一覧の中で 
    // 一番最初のエラー項目とする
    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objParagraph.appendChild(document.createTextNode('Please review the following'));
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // 発見したエラーすべてをエラー一覧に追加
    if (!bFirst)
    {
      strError = '最初の数字には、数値を入力してください。';
      objList.appendChild(addError(strError, '#num1', objForm, strID));
      strID = '';
    }
    if (!bSecond)
    {
      strError = '2番目の数字には、数値を入力してください。';
      objList.appendChild(addError(strError, '#num2', objForm, strID));
      strID = '';
    }
    // エラー情報に一覧を追加
    objNew.appendChild(objList);
    // 既存のエラーがあった場合、新規のエラーと置き換える
    // あるいは、新規のエラーをフォームの先頭に追加する
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // フォーカスを見出しにあるアンカーに置いて、スクリーンリーダーに
    // 対してエラーがあることを警告する
    objAnchor.focus();
    // フォームを送信しない
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}

// 数字を検証する関数
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
}

以下は、エラーメッセージを作成して、関連するフォームのフィールドにフォーカスさせるための補助関数である。

コード例：


// エラー内容を説明する、エラーのフォームフィールドへのリンクの
// リスト項目を作成する関数
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // strIDに値がある場合、これがリストで一番目のエラーとなる
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}

// エラーのフォームフィールドにフォーカスを置く関数
function focusFormField(objAnchor, objEvent, objForm)
{
  // キーボードナビゲーションを可能にするAllow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // フォーカスをフォーム・コントロールに設定する
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}

以下は事例のフォーム用HTMLである。

コード例：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>ECMAScript フォームの検証</title>
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>フォームの検証</h1>
<form id="numberform" method="post" action="form.php">

<fieldset>
<legend>数字のフィールド</legend>
<p>
<label for="num1">最初の数字を入力</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>

<label for="num2">2番目の数字を入力</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="フォームを送信">
</p>
</form>

</body>
</html>

この例はクライアントサイドスクリプトに限定しているため、サーバーサイドの検証によって補完されるべきである。例では、クライアントサイドスクリプトが利用できるときのエラーメッセージの作成に限定される。

このコードの実装サンプル：フォームの検証

SCR21: DOM（ドキュメント・オブジェクト・モデル）を用いて、ページにコンテンツを追加する

適用（対象）

ユーザーエージェント及び支援技術のサポートノート

解説

事例

事例 1

参考リソース

検証

チェックポイント

判定基準

SCR21: DOM（ドキュメント・オブジェクト・モデル）を用いて、ページにコンテンツを追加する

適用（対象）

ユーザーエージェント及び支援技術のサポートノート

解説

事例

事例 1

参考リソース

関連する実装方法

検証

チェックポイント

判定基準