ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScript フレームワークの比較: DOM トラバーサル

著者：Eve Cole 更新時間：2010-04-22 16:08:03

DOM トラバーサル

ID、要素タイプ、クラス名に基づいて要素を検索することは非常に便利ですが、DOM ツリー内の位置に基づいて要素を検索したい場合はどうすればよいでしょうか?言い換えれば、特定の要素があり、その親、その子の 1 つ、およびその前または次のノードの兄弟を見つけたいとします。たとえば、次の断片的な HTML コードを考えてみましょう。

リスト 1: HTML フラグメント (テーブル)

<テーブル>
<頭>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>アクション</th>
</tr>
</thead>
<本体>
<tr id="row-001">
<td>ジョー レノン</td>
<td>[email protected]</td>
<td><a href="#">編集</a>&nbsp;
<a href="#">削除</a></td>
</tr>
<tr id="row-002">
<td>ジル・マック・スウィーニー</td>
<td>[email protected]</td>
<td><a href="#">編集</a>&nbsp;
<a href="#">削除</a></td>
</tr>
</tbody>
</テーブル>

リスト 1 では、インデントを使用して、DOM ツリー内の各要素ノードの位置を示しています。この例では、table 要素がルート要素であり、2 つの子ノード thead と tbody を持っています。 thead 要素には tr 子ノードがあり、tr には 3 つの子 (すべての th 要素) があります。 tbody 要素には 2 つの tr 子ノードがあり、各 tr ノードには 3 つの子ノードがあります。上記の各行の 3 番目のノードにはさらに子ノードが含まれており、どちらも 2 つのリンク タグです。

ご存知のとおり、 JavaScript フレームワークの select 関数を使用すると、ID によって要素を簡単に選択できます。この例では、ID を持つ 2 つの要素があり、それは ID が row-001 と row-002 である tr 要素です。プロトタイプ ライブラリを使用して最初の tr を選択するには、次のコードを使用できます。

var theRow = $('row-001');

前の章では、セレクターを使用して、タイプまたはクラスに基づいて要素を取得する方法についても学習しました。この例では、次の構文を使用してすべての td 要素を取得できます。

var allCells = $$('td');

コード変更の主な問題は、すべての td 要素が返されることです。しかし、ID row-001 を持つ tr のすべての td 要素を取得したい場合はどうすればよいでしょうか?ここで DOM トラバーサル関数が活躍します。まず、プロトタイプを使用して、ID row-001 を持つ tr のすべての子を選択しましょう。

var firstRowCells = theRow.childElements();

これにより、theRow 変数 (最初に ID row-001 で設定した tr) のすべての子要素の配列が返されます。

次に、行の最初の子要素のみを取得したいと仮定します。この場合、それはテキスト「Joe Lennon」を含む td 要素です。これを行うには、次のステートメントを使用します。

var firstRowFirstCell = theRow.down();

とてもシンプルです！この特定の使用法は次と同等です。

var firstRowFirstCell = theRow.childElements()[0];

次のように表現することもできます。

var firstRowFirstCell = theRow.down(0);

JavaScript のインデックスは 0 から始まるため、上記のステートメントは基本的に JavaScript に最初の子要素を選択するように指示します。 2 番目の子要素 ​​(電子メール アドレス[email protected]を含むセル) を選択するには、次を使用します。

var firstRowSecondCell = theRow.down(1);

あるいは、兄弟ノード間で DOM を参照することもできます。この例では、2 番目のセルは最初のセルの次の兄弟です。したがって、次のステートメントを使用できます。

var firstRowSecondCell = firstRowFirstCell.next();

down() 関数の動作と同様に、3 番目のセルの選択もこのように使用できます。

var firstRowThirdCell = firstRowFirstCell.next(1);

インデックスを使用して特定のノードを検索するだけでなく、プロトタイプ ライブラリでは CSS セレクター構文も使用できます。リスト 1 では、Jill Mac Sweeney の詳細を含む 2 番目のリンク (「削除」リンク) を探しています。

var SecondRowSecondLink = $('row-002').down('a', 1);

この例では、$ 関数を使用して ID row-002 の行を検索し、2 番目の子孫である要素 (アンカー) までたどります。

一部のフレームワークでは、「デイジーチェーン」トラバーサル機能も許可されています。これは、トラバーサル コマンドを相互に接続できることを意味します。上記の例では、Prototype ライブラリの別の式は次のとおりです。

var SecondRowSecondLink = $('row-002').down('a').next();

次の例を見てください。

var domTraversal = $('row-001').down().up().next().previous();

ご覧のとおり、デイジー チェーンを使用すると、複数の DOM トラバーサル ステートメントを接続できます。実際、上記の例では、実際には ID row-001 の tr 要素が選択されることになるため、デイジー チェーンは開始位置に戻ります。

転載アドレス: http://www.denisdeng.com/?p=708

元のアドレス: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

関連記事