AngularJS TIPS
AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
AngularJSにおいて、ビューの操作はディレクティブに委ねるのが基本です。そもそもAngularJSアプリで文書ツリーを直接操作する状況はあまりありませんし、そうすべきでもありません（どうしても標準ディレクティブで実現できない機能でも、ディレクティブを自作し、コントローラー／サービスからはビューの操作を切り離すべきです）。
ただし、それでも既存の機能を手軽に移行したいなどで、例外的に文書ツリーを操作したい状況もあります。そのような場合には、angular.elementメソッドを利用することで、jQuery*1のサブセットであるjqLiteを呼び出せます。
- *1 jQueryは文書ツリーの操作やAjax通信などの機能を備えたJavaScriptライブラリです。
まずは、具体的な例を見てみましょう。以下は、文章中から「class="keywd"」である要素を取り出し、黄色のハイライトを付与するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<p>このシリーズでは、何回かにわたって、<strong class="keywd">AngularJS</strong>の基本機能を目的別リファレンスの形式でまとめていきます。</p>
<p><strong class="keywd">AngularJS</strong>とは、グーグル（Google）とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています。</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
angular.element(
document.getElementsByClassName('keywd')).css('background-color', 'yellow');
</script>
</body>
</html>
|
elementメソッドは与えられた要素オブジェクトを、jqLiteオブジェクトに変換します。jqLiteオブジェクトとは、言うなれば、利用できるメソッドが限定されたjQueryオブジェクトです。
［構文］elementメソッド
angular.element(elem)
- elem： 要素オブジェクト、もしくはHTML文字列
引数elemは、あくまで要素オブジェクト、またはHTML文字列である点に注意してください（jQueryの$関数のように、セレクターを渡すことはできません）。
jQLiteオブジェクトで利用できるメソッドは、jQueryオブジェクトで利用できるものの一部で、具体的には以下のようなものがあります（ABC順）。ただし、一部のメソッドには利用上の制限もありますので、注意してください。
addClassafterappendattr： 引数として関数型の指定は不可children： セレクターの利用は不可clonecontentscss： 取得／設定の挙動に一部制限ありdatadetachemptyeqfind： タグ名による検索に制限ありhasClasshtmlnext： セレクターの利用は不可on： 名前空間、セレクター、イベントデータの利用は不可off： 名前空間、セレクター、イベントデータの利用は不可one： 名前空間、セレクターの利用は不可parent： セレクターの利用は不可prependpropreadyremoveremoveAttrremoveClassremoveDatareplaceWithtexttoggleClassvalwrap
これらメソッドについて、詳しくは、別連載「jQuery TIPS」も参照してください。本TIPSのサンプルでは、cssメソッドを利用して、background-colorスタイルプロパティを設定しています。
API：angular.element カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第41回～第45回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
41. $cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
42. アプリ共通の例外処理を実装するには？（$exceptionHandler）
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
43. 【現在、表示中】≫ AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
44. AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
