是否有類似的代碼$（'＃date1'，this.el）[0]的純Javascript？

Question

我有一個應用程序，我建立與骨幹網和提線木偶，我覺得這是一個jQuery函數或類似的東西，我發現木偶查看該代碼

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

是否有與純JavaScript代碼類似？我曾嘗試這個代碼

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

但不工作

這裏全碼：

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" 
    }) 
}) 

提前感謝！

Answer 1

是否有類似於純Javascript中的代碼？

那是純JavaScript。但是如果你想使用DOM，而不是用jQuery做到這一點，你可以使用querySelector：

this.el.querySelector('#publicdate') 

...假設this.el是一個HTML元素。

querySelector可在document和單個元素上找到。當你在一個元素上使用它時，它只會看到該元素的樹中。它接受任何有效的CSS選擇器，並返回對第一個匹配元素的引用，或null。因此，上面所做的完全是jQuery代碼所做的（除非給予您null而不是undefined，否則找不到）：僅當存在於this.el的樹中時才查找具有id="publicdate"的元素。還有querySelectorAll，它返回匹配元素的列表。兩者都支持所有現代瀏覽器，也支持IE8。

我已經試過這個代碼

document.getElementById('date1') 

但不工作

好，date1和publicdate是不同的ID。但document.getElementById("publicdate")和this.el.querySelector("#publicdate")之間的重大區別是，只有當它存在於this.el的後代樹中時，後者纔會找到該元素，而getElementById將在文檔中的任何位置找到該元素。