Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

AngularJSで文書ツリーを操作するには?(element)

2016年2月8日

AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 AngularJSにおいて、ビューの操作はディレクティブに委ねるのが基本です。そもそもAngularJSアプリで文書ツリーを直接操作する状況はあまりありませんし、そうすべきでもありません(どうしても標準ディレクティブで実現できない機能でも、ディレクティブを自作し、コントローラー/サービスからはビューの操作を切り離すべきです)。

 ただし、それでも既存の機能を手軽に移行したいなどで、例外的に文書ツリーを操作したい状況もあります。そのような場合には、angular.elementメソッドを利用することで、jQuery*1のサブセットであるjqLiteを呼び出せます。

  • *1 jQueryは文書ツリーの操作やAjax通信などの機能を備えたJavaScriptライブラリです。

 まずは、具体的な例を見てみましょう。以下は、文章中から「class="keywd"」である要素を取り出し、黄色のハイライトを付与するサンプルです。

HTML
<!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>
jqLiteで文書ツリーを操作するコード(element.html)
「class="keywd"」である要素をハイライト表示

 elementメソッドは与えられた要素オブジェクトを、jqLiteオブジェクトに変換します。jqLiteオブジェクトとは、言うなれば、利用できるメソッドが限定されたjQueryオブジェクトです。

[構文]elementメソッド

angular.element(elem)

  • elem: 要素オブジェクト、もしくはHTML文字列

 引数elemは、あくまで要素オブジェクト、またはHTML文字列である点に注意してください(jQueryの$関数のように、セレクターを渡すことはできません)。

 jQLiteオブジェクトで利用できるメソッドは、jQueryオブジェクトで利用できるものの一部で、具体的には以下のようなものがあります(ABC順)。ただし、一部のメソッドには利用上の制限もありますので、注意してください。

  • addClass
  • after
  • append
  • attr: 引数として関数型の指定は不可
  • children: セレクターの利用は不可
  • clone
  • contents
  • css: 取得/設定の挙動に一部制限あり
  • data
  • detach
  • empty
  • eq
  • find: タグ名による検索に制限あり
  • hasClass
  • html
  • next: セレクターの利用は不可
  • on: 名前空間、セレクター、イベントデータの利用は不可
  • off: 名前空間、セレクター、イベントデータの利用は不可
  • one: 名前空間、セレクターの利用は不可
  • parent: セレクターの利用は不可
  • prepend
  • prop
  • ready
  • remove
  • removeAttr
  • removeClass
  • removeData
  • replaceWith
  • text
  • toggleClass
  • val
  • wrap

 これらメソッドについて、詳しくは、別連載「jQuery TIPS」も参照してください。本TIPSのサンプルでは、cssメソッドを利用して、background-colorスタイルプロパティを設定しています。

処理対象:DOMツリー カテゴリ:サービス
API:angular.element カテゴリ:ng(コアモジュール) > function(関数)

※以下では、本稿の前後を合わせて5回分(第41回~第45回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
41. $cookiesサービスを利用する際の注意点とは?($cookies)

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

AngularJS TIPS
42. アプリ共通の例外処理を実装するには?($exceptionHandler)

アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。

AngularJS TIPS
43. 【現在、表示中】≫ AngularJSで文書ツリーを操作するには?(element)

AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。

AngularJS TIPS
44. AngularJSアプリでjQueryを利用するには?(element/ng-jq)

HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。

AngularJS TIPS
45. フィルターを自作するには?(filterメソッド)

独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。

サイトからのお知らせ

Twitterでつぶやこう!