目次


演習: JavaScript と Document Object Model

Comments

この記事の演習では以下の内容を取り上げます。

  • さまざまな JavaScript のプロパティーを使用して DOM をトラバースする
  • ノードにアクセスする
  • ノードとノードの属性の値を取得して変更する
  • DOM を操作する
  • JavaScript のプロパティーを使用してノードの追加、削除、置き換えを行う

この記事で説明する演習を実際に行うためには、HTML エディターと、作成した JavaScript をテストするためのインターネット接続または localhost 環境が必要です。

演習1: DOM をトラバースする

JavaScript を使用して DOM をトラバースする方法を理解することは、リアルタイムで HTML ページを変更するための基礎となります。リスト 1 の HTML マークアップを使用して以下のタスクを実行してください。

  1. firstChild プロパティーを使用して要素にアクセスする
  2. lastChild プロパティーを使用して要素にアクセスする
  3. nextSibling プロパティーを使用して要素にアクセスする
  4. previousSibling プロパティーを使用して要素にアクセスする
  5. parentNode プロパティーを使用して要素にアクセスする
  6. childNodes プロパティーを使用して子要素の 1 グループにアクセスする
リスト 1. DOM をトラバースする演習のための HTML マークアップ
<html>
<head>
  <title>JavaScript and the Document Object Model</title>
</head>
<body>
  <div id="page">
    <div id="header"><h1 id="title">Page title</h1></div>
    <div id="content">
      <h2>Content title</h2>
      <p>Some copy goes here</p>
      <p>More copy goes here</p>
    </div>
  </div>
</body>
</html>

演習 2: ノードにアクセスする

演習 1 で、ノードにアクセスするための方法をいくつか学びました。同じくリスト 1 のマークアップを使用して以下のタスクを実行してください。

  1. nodeValue を使用してノードの値を取得する
  2. nodeValue を使用してノードの値を変更する
  3. ノードの属性の値を取得する
  4. ノードの属性の値を変更する

演習 3: DOM を操作する

DOM をトラバースする方法とノードの値を変更する方法を理解できたので、次のステップとしては当然、ノードの追加、削除、置き換えを行う方法を学びます。以下のタスクを実行してください。

  1. appendChild メソッドを使用してノードを追加する
  2. insertBefore メソッドを使用してノードを追加する
  3. removeChild メソッドを使用してノードを削除する
  4. replaceChild メソッドを使用してノードを置き換える

演習の解答

このリンク先の解答を見ながら皆さんの演習の結果をチェックしてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=776898
ArticleTitle=演習: JavaScript と Document Object Model
publish-date=12022011