fix(util): use getElementById when it's possible

Created by: Johann-S

Fixes: #27028 (closed)

/CC @XhmikosR

js/src/util.js

@@ -77,12 +77,20 @@ const Util = (($) => {
 
     getSelectorFromElement(element) {
       let selector = element.getAttribute('data-target')
+      let method = 'querySelector'
+
       if (!selector || selector === '#') {
-        selector = element.getAttribute('href') || ''
+        selector = (element.getAttribute('href') || '').trim()
+      }
+
+      const validSelector = selector
+      if (selector.charAt(0) === '#') {
+        selector = selector.substr(1)
+        method = 'getElementById'
       }
 
       try {
-        return document.querySelector(selector) ? selector : null
+        return document[method](selector) ? validSelector : null
       } catch (err) {
         return null
       }

js/tests/unit/util.js

@@ -20,6 +20,18 @@ $(function () {
     assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
   })
 
+  QUnit.test('Util.getSelectorFromElement should use getElementById', function (assert) {
+    assert.expect(2)
+
+    var spy = sinon.spy(document, 'getElementById')
+
+    var $el = $('<div data-target="#7"></div>').appendTo($('#qunit-fixture'))
+    $('<div id="7" />').appendTo($('#qunit-fixture'))
+
+    assert.strictEqual(Util.getSelectorFromElement($el[0]), '#7')
+    assert.ok(spy.called)
+  })
+
   QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {
     assert.expect(1)
     var namePlugin = 'collapse'