Angular DOM操作

今回はDOM操作をしてみます。

Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。

サンプルソース

DOM操作を行うには、Renderer2 を使用します。コンストラクタで取得し、その後のDOM操作で使用します。

画面の情報を取得するにはいくつか方法がありますが、今回はテンプレート参照変数とViewChildを使って連携します。

app.component.ts

				
import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
    `
    <button (click)="onClickMe()">Click me!</button>
    <div #test></div>
    `
})
export class AppComponent {
  @ViewChild('test')
  private test2: ElementRef;
  constructor(private renderer: Renderer2) {
  }

  onClickMe() {
    let btn = this.renderer.createElement('button');
    let text = this.renderer.createText('ボタン作成');

    this.renderer.setAttribute(btn, 'name', 'btnName');
    this.renderer.addClass(btn, 'className');
    this.renderer.setStyle(btn, 'width', '150px');

    this.renderer.appendChild(btn, text);
    this.renderer.appendChild(this.test2.nativeElement, btn);

    this.renderer.listen(btn, 'click', (event) => {
      this.renderer.removeChild(this.test2.nativeElement, btn);
    });
  }
}

実行イメージ

「Click me!」ボタンを押すと「ボタン作成」ボタンが表示され、「ボタン作成」ボタンを押すと消えます。

主なDOM操作処理メソッド

メソッド	説明
createElement('要素名')	要素を新規作成
createText('テキスト')	要素のテキストの追加
appendChild(親要素, 追加する要素)	親要素に要素を追加
insertBefore(親要素, 挿入する要素, 位置指定要素)	親要素の指定位置に要素を挿入
removeChild(親要素, 削除する要素)	親要素から要素を削除
parentNode(指定要素)	親要素を取得
nextSibling(指定要素)	兄弟要素を取得(指定要素の下の要素)
setAttribute(指定要素, '属性名', '属性値')	要素に属性の追加
removeAttribute(指定要素, '属性名')	要素から属性の削除
addClass(指定要素, '追加クラス名')	要素にクラスの追加
removeClass(指定要素, '追加クラス名')	要素からクラスの削除
listen(指定要素, 'イベント', 実行するメソッド)	要素のイベントハンドラの追加

ページのトップへ戻る