Y at-il un pur Javascript similaire à ce code $ ('# date1', this.el) [0]?

Question

J'ai une application, je construis avec Backbone et Marionette, je pense que cela est une fonction jQuery ou quelque chose comme ça, je trouve ce code sur marionette Voir

$('#publicdate',this.el)[0] 

Y at-il un similaire avec ce code dans le plus pur Javascript ? J'ai essayé ce code

document.getElementById('date1') 
this.getElementById('date1') 

mais ne fonctionne pas

Voici le code complet:

programming.module("Program.Chart", function(Chart, programming, Backbone, Marionette, $, _){ 
    Chart.chartT = Marionette.ItemView.extend({ 
     template : "#row", 
     tagName : "tr" 
    }) 

    Chart.chartV = Marionette.CompositeView.extend({ 
     childView : Chart.chartT, 
     childViewContainer : "tbody#detail", 
     template : "#chart", 
     onRender : function(){ 
     //DatePicker Range 
      var 
      startDate, 
      endDate, 
      updateStartDate = function() { 
       startPicker.setStartRange(startDate); 
       endPicker.setStartRange(startDate); 
       endPicker.setMinDate(startDate); 
      }, 
      updateEndDate = function() { 
       startPicker.setEndRange(endDate); 
       startPicker.setMaxDate(endDate); 
       endPicker.setEndRange(endDate); 
      }, 
      startPicker = new Pikaday({ 
       field: $('#date1',this.el)[0], 
       minDate: new Date(), 
       maxDate: new Date(2020, 12, 31), 
       onSelect: function() { 
        startDate = this.getDate(); 
        updateStartDate(); 
       } 
      }), 
      endPicker = new Pikaday({ 
       field: $('#date2',this.el)[0], 
       minDate: new Date(), 
       maxDate: new Date(2020, 12, 31), 
       onSelect: function() { 
        endDate = this.getDate(); 
        updateEndDate(); 
       } 
      }), 
      _startDate = startPicker.getDate(), 
      _endDate = endPicker.getDate(); 
      if (_startDate) { 
       startDate = _startDate; 
       updateStartDate(); 
      } 
      if (_endDate) { 
       endDate = _endDate; 
       updateEndDate(); 
      } 

     var selectdate = $('#publicdate',this.el)[0]; 
     selectdate.addEventListener("change",function(){ 
      alert("Changed") 
     }) 




     //Chart JS 
     var dataChart = programming.request("data:entities"); 
     console.log(dataChart.models) 

     var labels = ['12/08/2016','13/08/2016','16/08/2016'] 
     var series = [[100,210,311],[49,10,7]] 

     var data = { 
      labels : labels, 
      series : series 
     } 

     var option = { 
      showArea : true, 
      lineSmooth : false, 
      chartPadding : { 
       bottom:30, 
       top:30 
      }, 
      axisX : { 
       showGrid:false 
      }, 
      axisY : { 
      }, 
      plugins : [ 
       Chartist.plugins.ctAxisTitle({ 
        axisX: { 
         axisTitle: 'Tanggal', 
         axisClass: 'ct-axis-title', 
         offset: { 
          x: 0, 
          y: 50 
         }, 
         textAnchor: 'middle' 
        }, 
        axisY: { 
         axisTitle: 'Jumlah Penjualan', 
         axisClass: 'ct-axis-title', 
         offset: { 
          x: 0, 
          y: 0 
         }, 
         textAnchor: 'middle', 
         flipTitle: false 
        } 
       }), 
       Chartist.plugins.ctPointLabels({ 
        textAnchor : "middle" 
       }) 
      ] 
     } 
     new Chartist.Line($('.statistic',this.el)[0],data,option) 
     } 
    }) 

    Chart.notfound = Marionette.ItemView.extend({ 
     template : "#notfound" 
    }) 
}) 

Merci à l'avance!

Answer 1

Y at-il un similaire avec ce code en Javascript pur?

est pur JavaScript. Mais si vous voulez le faire avec le DOM plutôt qu'avec jQuery, vous pouvez utiliser querySelector:

this.el.querySelector('#publicdate') 

... en supposant this.el est un élément HTML.

querySelector est disponible à la fois sur document et sur des éléments individuels. Lorsque vous l'utilisez sur un élément, il ne regarde que dans l'arborescence de cet élément. Il accepte tout sélecteur CSS valide et renvoie une référence au premier élément correspondant, ou null. Donc, ce qui précède fait exactement ce que le code jQuery a fait (autre que de vous donner null au lieu de undefined s'il n'est pas trouvé): Trouve un élément avec id="publicdate"seulement si il existe dans l'arbre this.el.

Il y a aussi querySelectorAll, qui retourne une liste d'éléments correspondants. Les deux sont pris en charge sur tous les navigateurs modernes, et également IE8.

J'ai essayé ce code

document.getElementById('date1') 

mais ne fonctionne pas

Eh bien, date1 et publicdate sont différents ID. Mais, encore une fois la grande différence entre document.getElementById("publicdate") et this.el.querySelector("#publicdate"), que celui-ci trouvera l'élément que si elle existe dans l'arbre descendant de this.el, alors que getElementById trouvera partout dans le document.