Replace attr with getAttribute and setAttribute

This replaces jQuery's `attr` function with the vanilla JavaScript
`getAttribute` and `setAttribute`.

src/js/select2/core.js

@@ -21,9 +21,9 @@ define([
 
     // Set up the tabindex
 
-    var tabindex = $element.attr('tabindex') || 0;
+    var tabindex = $element[0].getAttribute('tabindex') || 0;
     Utils.StoreData($element[0], 'old-tabindex', tabindex);
-    $element.attr('tabindex', '-1');
+    $element[0].setAttribute('tabindex', '-1');
 
     // Set up containers and adapters
 
@@ -78,7 +78,7 @@ define([
 
     // Hide the original select
     $element[0].classList.add('select2-hidden-accessible');
-    $element.attr('aria-hidden', 'true');
+    $element[0].setAttribute('aria-hidden', 'true');
 
     // Synchronize any monitored attributes
     this._syncAttributes();
@@ -93,11 +93,12 @@ define([
 
   Select2.prototype._generateId = function ($element) {
     var id = '';
+    var element = $element[0];
 
-    if ($element.attr('id') != null) {
-      id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    if (element != null && element.getAttribute('id') != null) {
+      id = element.getAttribute('id');
+    } else if (element != null && element.getAttribute('name') != null) {
+      id = element.getAttribute('name') + '-' + Utils.generateChars(2);
     } else {
       id = Utils.generateChars(4);
     }
@@ -142,7 +143,7 @@ define([
     }
 
     if (method == 'style') {
-      var style = $element.attr('style');
+      var style = $element[0].getAttribute('style');
 
       if (typeof(style) !== 'string') {
         return null;
@@ -563,11 +564,11 @@ define([
     this._syncS = null;
 
     this.$element.off('.select2');
-    this.$element.attr('tabindex',
-    Utils.GetData(this.$element[0], 'old-tabindex'));
+    this.$element[0].setAttribute('tabindex',
+      Utils.GetData(this.$element[0], 'old-tabindex'));
 
     this.$element[0].classList.remove('select2-hidden-accessible');
-    this.$element.attr('aria-hidden', 'false');
+    this.$element[0].setAttribute('aria-hidden', 'false');
     Utils.RemoveData(this.$element[0]);
     this.$element.removeData('select2');
 
@@ -590,7 +591,7 @@ define([
       '</span>'
     );
 
-    $container.attr('dir', this.options.get('dir'));
+    $container[0].setAttribute('dir', this.options.get('dir'));
 
     this.$container = $container;
 

src/js/select2/data/tags.js

@@ -78,7 +78,7 @@ define([
 
       if (tag != null) {
         var $option = self.option(tag);
-        $option.attr('data-select2-tag', 'true');
+        $option[0].setAttribute('data-select2-tag', 'true');
 
         self.addOptions([$option]);
 

src/js/select2/data/tokenizer.js

@@ -34,7 +34,7 @@ define([
       // If an existing option wasn't found for it, create the option
       if (!$existingOptions.length) {
         var $option = self.option(item);
-        $option.attr('data-select2-tag', true);
+        $option[0].setAttribute('data-select2-tag', true);
 
         self._removeOldTags();
         self.addOptions([$option]);

src/js/select2/dropdown.js

@@ -18,7 +18,7 @@ define([
       '</span>'
     );
 
-    $dropdown.attr('dir', this.options.get('dir'));
+    $dropdown[0].setAttribute('dir', this.options.get('dir'));
 
     this.$dropdown = $dropdown;
 

src/js/select2/dropdown/attachBody.js

@@ -39,7 +39,7 @@ define([
 
   AttachBody.prototype.position = function (decorated, $dropdown, $container) {
     // Clone all of the container classes
-    $dropdown.attr('class', $container.attr('class'));
+    $dropdown[0].setAttribute('class', $container[0].getAttribute('class'));
 
     $dropdown[0].classList.remove('select2');
     $dropdown[0].classList.add('select2-container--open');

src/js/select2/dropdown/search.js

@@ -19,7 +19,7 @@ define([
     this.$search = $search.find('input');
 
     this.$search.prop('autocomplete', this.options.get('autocomplete'));
-    this.$search.attr('aria-label', searchLabel());
+    this.$search[0].setAttribute('aria-label', searchLabel());
 
     $rendered.prepend($search);
 
@@ -52,8 +52,8 @@ define([
     });
 
     container.on('open', function () {
-      self.$search.attr('tabindex', 0);
-      self.$search.attr('aria-controls', resultsId);
+      self.$search[0].setAttribute('tabindex', 0);
+      self.$search[0].setAttribute('aria-controls', resultsId);
 
       self.$search.trigger('focus');
 
@@ -63,7 +63,7 @@ define([
     });
 
     container.on('close', function () {
-      self.$search.attr('tabindex', -1);
+      self.$search[0].setAttribute('tabindex', -1);
       self.$search.removeAttr('aria-controls');
       self.$search.removeAttr('aria-activedescendant');
 
@@ -91,7 +91,7 @@ define([
 
     container.on('results:focus', function (params) {
       if (params.data._resultId) {
-        self.$search.attr('aria-activedescendant', params.data._resultId);
+        self.$search[0].setAttribute('aria-activedescendant', params.data._resultId);
       } else {
         self.$search.removeAttr('aria-activedescendant');
       }

src/js/select2/options.js

@@ -67,7 +67,7 @@ define([
         );
       }
 
-      $e.attr('ajax--url', Utils.GetData($e[0], 'ajaxUrl'));
+      $e[0].setAttribute('ajax--url', Utils.GetData($e[0], 'ajaxUrl'));
       Utils.StoreData($e[0], 'ajax-Url', Utils.GetData($e[0], 'ajaxUrl'));
     }
 

src/js/select2/results.js

@@ -18,7 +18,7 @@ define([
     );
 
     if (this.options.get('multiple')) {
-      $results.attr('aria-multiselectable', 'true');
+      $results[0].setAttribute('aria-multiselectable', 'true');
     }
 
     this.$results = $results;
@@ -138,10 +138,10 @@ define([
         if ((item.element != null && item.element.selected) ||
             (item.element == null && selectedIds.indexOf(id) > -1)) {
           this.classList.add('select2-results__option--selected');
-          $option.attr('aria-selected', 'true');
+          $option[0].setAttribute('aria-selected', 'true');
         } else {
           this.classList.remove('select2-results__option--selected');
-          $option.attr('aria-selected', 'false');
+          $option[0].setAttribute('aria-selected', 'false');
         }
       });
 
@@ -256,7 +256,7 @@ define([
 
     var id = container.id + '-results';
 
-    this.$results.attr('id', id);
+    this.$results[0].setAttribute('id', id);
 
     container.on('results:all', function (params) {
       self.clear();
@@ -307,17 +307,17 @@ define([
 
     container.on('open', function () {
       // When the dropdown is open, aria-expended="true"
-      self.$results.attr('aria-expanded', 'true');
-      self.$results.attr('aria-hidden', 'false');
+      self.$results[0].setAttribute('aria-expanded', 'true');
+      self.$results[0].setAttribute('aria-hidden', 'false');
 
       self.setClasses();
       self.ensureHighlightVisible();
     });
 
     container.on('close', function () {
       // When the dropdown is closed, aria-expended="false"
-      self.$results.attr('aria-expanded', 'false');
-      self.$results.attr('aria-hidden', 'true');
+      self.$results[0].setAttribute('aria-expanded', 'false');
+      self.$results[0].setAttribute('aria-hidden', 'true');
       self.$results.removeAttr('aria-activedescendant');
     });
 
@@ -480,9 +480,11 @@ define([
       function (evt) {
       var data = Utils.GetData(this, 'data');
 
-      self.getHighlightedResults()
-          .removeClass('select2-results__option--highlighted')
-          .attr('aria-selected', 'false');
+      var $highlighted = self.getHighlightedResults();
+      $highlighted.removeClass('select2-results__option--highlighted');
+      if($highlighted[0] != null) {
+        $highlighted[0].setAttribute('aria-selected', 'false');
+      }
 
       self.trigger('results:focus', {
         data: data,

src/js/select2/selection/allowClear.js

@@ -100,8 +100,11 @@ define([
       return;
     }
 
-    var selectionId = this.$selection.find('.select2-selection__rendered')
-      .attr('id');
+    var rendered = this.$selection.find('.select2-selection__rendered')[0]
+    var selectionId = null;
+    if(rendered != null) {
+      selectionId = rendered.getAttribute('id');
+    }
 
     var removeAll = this.options.get('translations').get('removeAllItems');
 
@@ -110,9 +113,9 @@ define([
         '<span aria-hidden="true">&times;</span>' +
       '</button>'
     );
-    $remove.attr('title', removeAll());
-    $remove.attr('aria-label', removeAll());
-    $remove.attr('aria-describedby', selectionId);
+    $remove[0].setAttribute('title', removeAll());
+    $remove[0].setAttribute('aria-label', removeAll());
+    $remove[0].setAttribute('aria-describedby', selectionId);
     Utils.StoreData($remove[0], 'data', data);
 
     this.$selection.prepend($remove);

src/js/select2/selection/base.js

@@ -23,13 +23,15 @@ define([
 
     if (Utils.GetData(this.$element[0], 'old-tabindex') != null) {
       this._tabindex = Utils.GetData(this.$element[0], 'old-tabindex');
-    } else if (this.$element.attr('tabindex') != null) {
-      this._tabindex = this.$element.attr('tabindex');
+    } else if (this.$element[0].getAttribute('tabindex') != null) {
+      this._tabindex = this.$element[0].getAttribute('tabindex');
     }
 
-    $selection.attr('title', this.$element.attr('title'));
-    $selection.attr('tabindex', this._tabindex);
-    $selection.attr('aria-disabled', 'false');
+    if(this.$element[0].getAttribute('title')) {
+      $selection[0].setAttribute('title', this.$element[0].getAttribute('title'))
+    }
+    $selection[0].setAttribute('tabindex', this._tabindex);
+    $selection[0].setAttribute('aria-disabled', 'false');
 
     this.$selection = $selection;
 
@@ -60,7 +62,7 @@ define([
     });
 
     container.on('results:focus', function (params) {
-      self.$selection.attr('aria-activedescendant', params.data._resultId);
+      self.$selection[0].setAttribute('aria-activedescendant', params.data._resultId);
     });
 
     container.on('selection:update', function (params) {
@@ -69,15 +71,15 @@ define([
 
     container.on('open', function () {
       // When the dropdown is open, aria-expanded="true"
-      self.$selection.attr('aria-expanded', 'true');
-      self.$selection.attr('aria-owns', resultsId);
+      self.$selection[0].setAttribute('aria-expanded', 'true');
+      self.$selection[0].setAttribute('aria-owns', resultsId);
 
       self._attachCloseHandler(container);
     });
 
     container.on('close', function () {
       // When the dropdown is closed, aria-expanded="false"
-      self.$selection.attr('aria-expanded', 'false');
+      self.$selection[0].setAttribute('aria-expanded', 'false');
       self.$selection.removeAttr('aria-activedescendant');
       self.$selection.removeAttr('aria-owns');
 
@@ -87,13 +89,13 @@ define([
     });
 
     container.on('enable', function () {
-      self.$selection.attr('tabindex', self._tabindex);
-      self.$selection.attr('aria-disabled', 'false');
+      self.$selection[0].setAttribute('tabindex', self._tabindex);
+      self.$selection[0].setAttribute('aria-disabled', 'false');
     });
 
     container.on('disable', function () {
-      self.$selection.attr('tabindex', '-1');
-      self.$selection.attr('aria-disabled', 'true');
+      self.$selection[0].setAttribute('tabindex', '-1');
+      self.$selection[0].setAttribute('aria-disabled', 'true');
     });
   };
 

src/js/select2/selection/multiple.js

@@ -27,7 +27,10 @@ define([
     MultipleSelection.__super__.bind.apply(this, arguments);
 
     var id = container.id + '-container';
-    this.$selection.find('.select2-selection__rendered').attr('id', id);
+    var rendered = this.$selection.find('.select2-selection__rendered')[0]
+    if(rendered != null) {
+      rendered.setAttribute('id', id);
+    }
 
     this.$selection.on('click', function (evt) {
       self.trigger('toggle', {
@@ -106,8 +109,8 @@ define([
 
     var $selections = [];
 
-    var selectionIdPrefix = this.$selection.find('.select2-selection__rendered')
-      .attr('id') + '-choice-';
+    var selectionIdPrefix = this.$selection.find('.select2-selection__rendered')[0]
+      .getAttribute('id') + '-choice-';
 
     for (var d = 0; d < data.length; d++) {
       var selection = data[d];
@@ -124,22 +127,22 @@ define([
       }
 
       $selection.find('.select2-selection__choice__display')
-        .append(formatted)
-        .attr('id', selectionId);
+        .append(formatted)[0]
+        .setAttribute('id', selectionId);
 
       var title = selection.title || selection.text;
 
       if (title) {
-        $selection.attr('title', title);
+        $selection[0].setAttribute('title', title);
       }
 
       var removeItem = this.options.get('translations').get('removeItem');
 
-      var $remove = $selection.find('.select2-selection__choice__remove');
+      var remove = $selection.find('.select2-selection__choice__remove')[0];
 
-      $remove.attr('title', removeItem());
-      $remove.attr('aria-label', removeItem());
-      $remove.attr('aria-describedby', selectionId);
+      remove.setAttribute('title', removeItem());
+      remove.setAttribute('aria-label', removeItem());
+      remove.setAttribute('aria-describedby', selectionId);
 
       Utils.StoreData($selection[0], 'data', selection);
 

src/js/select2/selection/placeholder.js

@@ -29,7 +29,7 @@ define([
       placeholder.text ||
       $placeholder.text();
 
-    this.$selection.find('.select2-selection__rendered').attr(
+    this.$selection.find('.select2-selection__rendered')[0].setAttribute(
       'title',
       placeholderTitle
     );