美文网首页
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