JavaScript の知識を少し広げ、DOM について学びましょう。以下の演習では、JavaScript のプロパティーを使用して DOM をトラバースする方法、ノードにアクセスする方法、ノードの値を変更する方法、そして属性を操作する方法を学びます。

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software、Fire Mountain Gems などの企業のプロジェクトを手掛けてきました。著書には『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創始者でもあります。



2011年 12月 02日

この連載について

これらの演習と解答は、developerWorks のナレッジ・パス「A comprehensive guide to JavaScript」の一部として公開された記事「JavaScript and the Document Object Model」を補完するものです。以下の演習に取りかかる前に、「JavaScript and the Document Object Model」を読んでおくことをお勧めします。

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

  • さまざまな 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 メソッドを使用してノードを置き換える

演習の解答

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

参考文献

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


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