add information about valid selectors (#27137)

Author: Johann-S

js/src/util.js

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

js/tests/unit/util.js

@@ -20,31 +20,6 @@ $(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.getSelectorFromElement should use querySelector when there are multi ids', function (assert) {
-    assert.expect(2)
-
-    var spy = sinon.spy(document, 'querySelector')
-
-    var $el = $('<div data-target="#j7, #j8"></div>').appendTo($('#qunit-fixture'))
-    $('<div id="j7" />').appendTo($('#qunit-fixture'))
-    $('<div id="j8" />').appendTo($('#qunit-fixture'))
-
-    assert.strictEqual(Util.getSelectorFromElement($el[0]), '#j7, #j8')
-    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'

site/docs/4.1/getting-started/javascript.md

@@ -35,8 +35,10 @@ $(document).off('.alert.data-api')
 {% endhighlight %}
 
 {% capture callout %}
-##### Escaping selectors
-If you use special selectors, for example: `collapse:Example`, be sure to escape them, because they'll be passed through jQuery.
+## Selectors
+
+Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier).
+If you use special selectors, for example: `collapse:Example` be sure to escape them.
 {% endcapture %}
 {% include callout.html content=callout type="warning" %}