From a3e45d8ced63369ad6bd29ce45d919b77412a99b Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Fri, 31 Aug 2018 21:00:29 +0200
Subject: [PATCH] add information about valid selectors (#27137)
---
js/src/util.js | 9 +-------
js/tests/unit/util.js | 25 ---------------------
site/docs/4.1/getting-started/javascript.md | 6 +++--
3 files changed, 5 insertions(+), 35 deletions(-)
diff --git a/js/src/util.js b/js/src/util.js
index 8165ab46f6..653598ae2b 100644
--- a/js/src/util.js
+++ b/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
}
diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js
index 4f44c29073..37327b8681 100644
--- a/js/tests/unit/util.js
+++ b/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'
diff --git a/site/docs/4.1/getting-started/javascript.md b/site/docs/4.1/getting-started/javascript.md
index 20500c2af6..e9fcc51822 100644
--- a/site/docs/4.1/getting-started/javascript.md
+++ b/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" %}
--
GitLab