目的：例如购物车的多选或者单选要获取checkbox的参数
框架：ionic3
准备：创建一个dompage
html
<ion-header>
<ion-navbar>
<ion-title>dom</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #div>
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</div>
<br>
<br>
<button (click)="get()">获取dom</button>
</ion-content>
ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage({
name:'DomPage'
})
@Component({
selector: 'page-dom',
templateUrl: 'dom.html',
})
export class DomPage {
@ViewChild('div') div:ElementRef;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.get();
}
get(){
let el: HTMLElement = <HTMLElement>this.div.nativeElement
let all = el.querySelectorAll('input[type=checkbox]') // NodeList
let all2 = [].slice.call(el.querySelectorAll('input[type=checkbox]')) // Array
console.log(el);
console.log(all); // NodeList
console.log(all2); // Array
}
}
image.png
注意：NodeList 不能直接操作，要转为Array。
（请问下还有其他的方法吗？可以留意补充下，请指教指教。）
