HTML要素の取得と操作（DOM）

AngularJSでHTML要素の取得と操作（DOM）を行う方法です。

document.querySelectorで取得した要素をangular.elementでラップして、その後の操作を行っています。

HTML

<ul class="example-list">
    <li class="example-item">要素1</li>
    <li class="example-item">要素2</li>
    <li class="example-item">要素3</li>
    <li class="example-item">要素4</li>
    <li class="example-item">要素5</li>
</ul>

JavaScript

// 取得
var parentElem = angular.element(document.querySelector(".example-list"));
// 検索
parentElem.find(".example-item").each(function(i, item){
    // 変更
    var el = angular.element(item);
    el.html((i + 1) + "番目の要素");
});

流れとしてはdocument.querySelector()でHTML要素を取得して、取得した要素をjqLiteでラップし、jqLiteで提供されいているメソッドで要素に対して操作を行います。（querySelector()以外にgetElementsByClassName()やgetElementById()を使用）

なお「jqLite」はAngularJSで利用できるjQueryの機能限定版です。基本的なことはできると思いますが、使えるメソッドに制限があるようなので、詳しくはこちらを確認してください。