美文网首页
ionic 操作dom(获取checkbox的参数)

ionic 操作dom(获取checkbox的参数)

作者: 候鸟_ywh | 来源:发表于2018-04-29 01:32 被阅读0次

目的:例如购物车的多选或者单选要获取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。

(请问下还有其他的方法吗?可以留意补充下,请指教指教。)

相关文章

网友评论

      本文标题:ionic 操作dom(获取checkbox的参数)

      本文链接:https://www.haomeiwen.com/subject/lwzglftx.html