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']

})

 

export class SettingComponent {

@ViewChild('refChild') ref: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const div = this.render2.createElement("div");

const text = this.render2.createText("666");

this.render2.appendChild(div, text);

 

const parent = this.ref.nativeElement.parentNode;

const refChild = this.ref.nativeElement;

this.render2.insertBefore(parent, div, refChild);

}

}

 

三、removeChild()

removeChild(parent: any, oldChild: any): void

例子：

 

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

 

@Component({

selector: 'app-removeChild',

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

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

})

 

export class SettingComponent {

@ViewChild('oldChild') old: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const parent = this.old.nativeElement.parentNode;

const oldChild = this.old.nativeElement;

this.render2.removeChild(parent, oldChild);

}

}

 

四、selectRootElement()

selectRootElement(selectOrNode: string|any): any

通过DOM元素的name属性或者CSS class属性来获取元素；

例子：

 

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

 

@Component({

selector: 'app-select',

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

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

})

 

export class SettingComponent {

@ViewChild('body') body: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const child = this.render2.selectRootElement(".div1");

const text = this.render2.createText("selectRootElement");

this.render2.appendChild(child, text);

}

}

 

五、setAttribute() and removeAttribute()

setAttribute(el: any, name: string, namespace?: string|null): void

removeAttribute(el: any, name: string, namespace?: string|null): void

例子：

 

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

 

@Component({

selector: 'app-attribute',

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

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

})

 

export class SettingComponent {

@ViewChild('body') body: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const node = this.body.nativeElement;

this.render2.removeAttribute(node, "class", "body");

this.render2.setAttribute(node, "class", "body1")

}

}

 

六、setProperty()

setProperty(el: any, name: string, value: any): void

setProperty与setAttribute的区别是 attribute 是被HTML定义的属性， 而 property是被DOM定义的属性；

例子：

 

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

 

@Component({

selector: 'ng-property',

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

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

})

 

export class SettingComponent {

@ViewChild('body') body: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const div = this.body.nativeElement;

this.render2.setProperty(div, "id", "xyz");

}

}

 

七、addClass()和removeClass()

addClass(el: any, name: string): void

removeClass(el: any, name: string): void

例子：

 

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

 

@Component({

selector: 'app-class',

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

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

})

 

export class SettingComponent {

@ViewChild('body') body: ElementRef;

constructor(

private element: ElementRef,

private render2: Renderer2

){}

 

onClick() {

const div = this.body.nativeElement;

this.render2.removeClass(div, "body");

this.render2.addClass(div, "body1");

}

}