angular2 对于DOM元素的获取与操作

  为了能够支持跨平台，angular通过抽象层封装了不同平台的差异。

  正确操作DOM的方式（用ElementRef和Renderer2）这篇文章将讲述如何使用Renderer2来操作DOM元素。我们可以使用Renderer2对元素的class和style属性进行操作，也可以对元素进行增加、删除、和插入等操作。

使用的技术：

1.   angular4.2.4

2.   TypeScript2.3.3

3.    NodeJs6.10.1

4.   Angular CLI 1.3.1

5.   Angular Compiler CLI 4.2.4

 

一. createElement()、createText、appendChild()

createElement(name: string, namespace?: string|null): any

createText(value: string): any

appendChild(parent: any, child: any): void

例子：

 

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

@Component({

selector: 'app-append',

templateUrl: './append-demo.component.html'

})

export class AppendDemoComponent {

@ViewChild('div') private d1: ElementRef;  

constructor(private renderer: Renderer2) {

}

onClick() {

const li = this.renderer.createElement('li');

const text = this.renderer.createText('Click here to add li');

this.renderer.appendChild(li, text);

this.renderer.appendChild(this.d1.nativeElement, li);

}

}

 

二、insertBefore()

 

insertBefore(parent: any, newChild: any, refChild: any): void

例子：

 

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

 

@Component({

selector: 'app-insertBefore',

templateUrl: './insertBefore.component.html',

styleUrls: ['./insertBefore.component.css']