編集部からのお知らせ
「ZDNet Japan Summit」参加登録受付中! 
新着記事集:「負荷分散」

YUIの基本操作をおさらい

沖林正紀

2007-11-06 19:19

 これまで、この連載ではYUI2.3で追加されたコンポーネントやLogReaderを紹介してきた。今回で最後となるので、YUIの基本である、DOMによるノードの取得やイベント処理をおさらいしておこう。

 YUIは、対応するブラウザ利用条件に配慮した上でご利用いただきたい。また、実行環境となるWebブラウザはJavaScriptを実行可能にしておかなくてはならないのはこれまでと同様だ。

ノード情報の取得と操作

 Ajaxアプリケーションでは、Webブラウザに表示した後のHTMLコンテンツに対してさまざまな操作を行う。そのためには、操作したいHTMLノードの情報を取得しなければならない。

 JavaScriptとYUIのそれぞれで、'ex1-div'というIDをもつノードの情報を変数nodeに代入する例を以下に示す。

JavaScript

  var node = document.getElementById( 'ex1-div' );

YUI

  var node = YAHOO.util.Dom.get( 'ex1-div' );

 そのノードの最初の子ノードを取得する例を以下に示す。JavaScriptではプロパティだが、YUIではメソッドとして実行するという違いがある。また、YUIでは子ノードがテキストの場合はデータを取得できない。

JavaScript

  var child = node.firstChild;

YUI

  var child = YAHOO.util.Dom.getFirstChild( node ); // 子ノードがテキストの場合は取得不可

 このようにYAHOO.util.Domクラスには、JavaScriptと競合するメソッドも存在するが、それだけではない。

 たとえばIDを持つノードのみ情報を取得する処理は以下のように記述できる。tagsには取得されたタグの配列が代入される。getElementsByメソッドの引数に関数が含まれているので複雑そうに見えてしまうが、この関数には、取得するノードを判別する処理が記述されている。

var tags = YAHOO.util.Dom.getElementsBy( function( elem ) {
               return ( elem.id.length > 0 );  // IDを持つタグのみ取得
           } );

 IDを持つタグのclass属性に'ex1-class'というクラス名を追加する処理は以下のように記述できる。第1引数は上記と同じだが、クラス名を追加する処理は第4引数の関数に記述されている。ちなみに第2引数にはタグ名、第3引数には取得処理を開始するノードを指定できる。

var tags = YAHOO.util.Dom.getElementsBy( function( el ) {
               // IDを持つタグのみ取得
               return ( el.id.length > 0 );
             }, null, null, function( el )  {
               // ex1-classをclass属性に追加
               YAHOO.util.Dom.addClass( el, 'ex1-class' );
             }
           );

 この他にも、ノード情報の取得や操作のために関数を利用するメソッドが多く存在するので、ドキュメントを参照して活用していただきたい。

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. クラウドコンピューティング

    Google Cloudセキュリティ基盤ガイド、設計から運用までのポイントを網羅

  2. セキュリティ

    仮想化・自動化を活用して次世代データセンターを構築したJR東日本情報システム

  3. ビジネスアプリケーション

    スモールスタート思考で業務を改善! 「社内DX」推進のためのキホンを知る

  4. セキュリティ

    Emotetへの感染を導く攻撃メールが多数報告!侵入を前提に対応するEDRの導入が有力な解決策に

  5. セキュリティ

    偽装ウイルスを見抜けず水際対策の重要性を痛感!竹中工務店が実施した2万台のPCを守る方法とは

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]