Есть ли чистый Javascript, похожий на этот код $ ('# date1', this.el) [0]?

Question

У меня есть приложение, я строю с Backbone и марионеток, я думаю, что это функция JQuery или что-то подобное, я нашел этот код на кукольный View

$('#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?

Это is чистый JavaScript. Но если вы хотите сделать это с DOM, а не с JQuery, вы можете использовать querySelector:

this.el.querySelector('#publicdate') 

... если предположить this.el является HTML элемент.

querySelector имеется как на document, так и на отдельных элементах. Когда вы используете его на элементе, он выглядит только внутри дерева этого элемента. Он принимает любой допустимый селектор CSS и возвращает ссылку на первый соответствующий элемент, или null. Таким образом, вышесказанное делает именно то, что сделал код jQuery (кроме предоставления вам null вместо undefined, если не найден): находит элемент с id="publicdate", только если существует в this.el.

Существует также querySelectorAll, который возвращает список соответствующих элементов. Оба поддерживаются во всех современных браузерах, а также в IE8.

Я попробовал этот код

document.getElementById('date1') 

, но не работает

Ну, date1 и publicdate разные идентификаторы. Но большая разница между document.getElementById("publicdate") и this.el.querySelector("#publicdate") - это то, что последний найдет этот элемент только в том случае, если он существует в дереве потомков this.el, тогда как getElementById найдет его в любом месте документа.