diff --git a/js/src/alert.js b/js/src/alert.js
index 36d4bb6942..237e0851e3 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -84,7 +84,7 @@ const Alert = (($) => {
       let parent     = false
 
       if (selector) {
-        parent = $(selector)[0]
+        parent = document.querySelector(selector)
       }
 
       if (!parent) {
diff --git a/js/src/button.js b/js/src/button.js
index 1065ae6d7d..442640dfec 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -68,15 +68,15 @@ const Button = (($) => {
       )[0]
 
       if (rootElement) {
-        const input = $(this._element).find(Selector.INPUT)[0]
+        const input = this._element.querySelector(Selector.INPUT)
 
         if (input) {
           if (input.type === 'radio') {
             if (input.checked &&
-              $(this._element).hasClass(ClassName.ACTIVE)) {
+              this._element.classList.contains(ClassName.ACTIVE)) {
               triggerChangeEvent = false
             } else {
-              const activeElement = $(rootElement).find(Selector.ACTIVE)[0]
+              const activeElement = rootElement.querySelector(Selector.ACTIVE)
 
               if (activeElement) {
                 $(activeElement).removeClass(ClassName.ACTIVE)
@@ -91,7 +91,7 @@ const Button = (($) => {
               rootElement.classList.contains('disabled')) {
               return
             }
-            input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
+            input.checked = !this._element.classList.contains(ClassName.ACTIVE)
             $(input).trigger('change')
           }
 
@@ -102,7 +102,7 @@ const Button = (($) => {
 
       if (addAriaPressed) {
         this._element.setAttribute('aria-pressed',
-          !$(this._element).hasClass(ClassName.ACTIVE))
+          !this._element.classList.contains(ClassName.ACTIVE))
       }
 
       if (triggerChangeEvent) {
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 7616e53bb4..59115de177 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -99,7 +99,7 @@ const Carousel = (($) => {
 
       this._config             = this._getConfig(config)
       this._element            = $(element)[0]
-      this._indicatorsElement  = $(this._element).find(Selector.INDICATORS)[0]
+      this._indicatorsElement  = this._element.querySelector(Selector.INDICATORS)
 
       this._addEventListeners()
     }
@@ -142,7 +142,7 @@ const Carousel = (($) => {
         this._isPaused = true
       }
 
-      if ($(this._element).find(Selector.NEXT_PREV)[0]) {
+      if (this._element.querySelector(Selector.NEXT_PREV)) {
         Util.triggerTransitionEnd(this._element)
         this.cycle(true)
       }
@@ -170,7 +170,7 @@ const Carousel = (($) => {
     }
 
     to(index) {
-      this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
+      this._activeElement = this._element.querySelector(Selector.ACTIVE_ITEM)
 
       const activeIndex = this._getItemIndex(this._activeElement)
 
@@ -269,7 +269,9 @@ const Carousel = (($) => {
     }
 
     _getItemIndex(element) {
-      this._items = $.makeArray($(element).parent().find(Selector.ITEM))
+      this._items = element && element.parentNode
+        ? [].slice.call(element.parentNode.querySelectorAll(Selector.ITEM))
+        : []
       return this._items.indexOf(element)
     }
 
@@ -294,7 +296,7 @@ const Carousel = (($) => {
 
     _triggerSlideEvent(relatedTarget, eventDirectionName) {
       const targetIndex = this._getItemIndex(relatedTarget)
-      const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0])
+      const fromIndex = this._getItemIndex(this._element.querySelector(Selector.ACTIVE_ITEM))
       const slideEvent = $.Event(Event.SLIDE, {
         relatedTarget,
         direction: eventDirectionName,
@@ -309,8 +311,8 @@ const Carousel = (($) => {
 
     _setActiveIndicatorElement(element) {
       if (this._indicatorsElement) {
-        $(this._indicatorsElement)
-          .find(Selector.ACTIVE)
+        const indicators = [].slice.call(this._indicatorsElement.querySelectorAll(Selector.ACTIVE))
+        $(indicators)
           .removeClass(ClassName.ACTIVE)
 
         const nextIndicator = this._indicatorsElement.children[
@@ -324,7 +326,7 @@ const Carousel = (($) => {
     }
 
     _slide(direction, element) {
-      const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
+      const activeElement = this._element.querySelector(Selector.ACTIVE_ITEM)
       const activeElementIndex = this._getItemIndex(activeElement)
       const nextElement   = element || activeElement &&
         this._getItemByDirection(direction, activeElement)
diff --git a/js/src/collapse.js b/js/src/collapse.js
index e788abbe7b..93fe8abc0e 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -68,7 +68,7 @@ const Collapse = (($) => {
       this._isTransitioning = false
       this._element         = element
       this._config          = this._getConfig(config)
-      this._triggerArray    = $.makeArray($(
+      this._triggerArray    = $.makeArray(document.querySelectorAll(
         `[data-toggle="collapse"][href="#${element.id}"],` +
         `[data-toggle="collapse"][data-target="#${element.id}"]`
       ))
@@ -162,7 +162,7 @@ const Collapse = (($) => {
 
       this._element.style[dimension] = 0
 
-      if (this._triggerArray.length > 0) {
+      if (this._triggerArray.length) {
         $(this._triggerArray)
           .removeClass(ClassName.COLLAPSED)
           .attr('aria-expanded', true)
@@ -297,7 +297,8 @@ const Collapse = (($) => {
       const selector =
         `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
 
-      $(parent).find(selector).each((i, element) => {
+      const children = [].slice.call(parent.querySelectorAll(selector))
+      $(children).each((i, element) => {
         this._addAriaAndCollapsedClass(
           Collapse._getTargetFromElement(element),
           [element]
@@ -311,7 +312,7 @@ const Collapse = (($) => {
       if (element) {
         const isOpen = $(element).hasClass(ClassName.SHOW)
 
-        if (triggerArray.length > 0) {
+        if (triggerArray.length) {
           $(triggerArray)
             .toggleClass(ClassName.COLLAPSED, !isOpen)
             .attr('aria-expanded', isOpen)
@@ -323,7 +324,7 @@ const Collapse = (($) => {
 
     static _getTargetFromElement(element) {
       const selector = Util.getSelectorFromElement(element)
-      return selector ? $(selector)[0] : null
+      return selector ? document.querySelector(selector) : null
     }
 
     static _jQueryInterface(config) {
@@ -369,7 +370,8 @@ const Collapse = (($) => {
 
     const $trigger = $(this)
     const selector = Util.getSelectorFromElement(this)
-    $(selector).each(function () {
+    const selectors = [].slice.call(document.querySelectorAll(selector))
+    $(selectors).each(function () {
       const $target = $(this)
       const data    = $target.data(DATA_KEY)
       const config  = data ? 'toggle' : $trigger.data()
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index bef8da1a0c..5494fdb64a 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -242,13 +242,15 @@ const Dropdown = (($) => {
     _getMenuElement() {
       if (!this._menu) {
         const parent = Dropdown._getParentFromElement(this._element)
-        this._menu = $(parent).find(Selector.MENU)[0]
+        if (parent) {
+          this._menu = parent.querySelector(Selector.MENU)
+        }
       }
       return this._menu
     }
 
     _getPlacement() {
-      const $parentDropdown = $(this._element).parent()
+      const $parentDropdown = $(this._element.parentNode)
       let placement = AttachmentMap.BOTTOM
 
       // Handle dropup
@@ -284,6 +286,7 @@ const Dropdown = (($) => {
       } else {
         offsetConf.offset = this._config.offset
       }
+
       const popperConfig = {
         placement: this._getPlacement(),
         modifiers: {
@@ -382,7 +385,7 @@ const Dropdown = (($) => {
       const selector = Util.getSelectorFromElement(element)
 
       if (selector) {
-        parent = $(selector)[0]
+        parent = document.querySelector(selector)
       }
 
       return parent || element.parentNode
@@ -417,7 +420,7 @@ const Dropdown = (($) => {
       if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) ||
            isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
         if (event.which === ESCAPE_KEYCODE) {
-          const toggle = $(parent).find(Selector.DATA_TOGGLE)[0]
+          const toggle = parent.querySelector(Selector.DATA_TOGGLE)
           $(toggle).trigger('focus')
         }
 
@@ -425,7 +428,7 @@ const Dropdown = (($) => {
         return
       }
 
-      const items = $(parent).find(Selector.VISIBLE_ITEMS).get()
+      const items = [].slice.call(parent.querySelectorAll(Selector.VISIBLE_ITEMS))
 
       if (items.length === 0) {
         return
diff --git a/js/src/modal.js b/js/src/modal.js
index b091a79b5e..904f6f93ce 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -78,7 +78,7 @@ const Modal = (($) => {
     constructor(element, config) {
       this._config              = this._getConfig(config)
       this._element             = element
-      this._dialog              = $(element).find(Selector.DIALOG)[0]
+      this._dialog              = element.querySelector(Selector.DIALOG)
       this._backdrop            = null
       this._isShown             = false
       this._isBodyOverflowing   = false
@@ -333,7 +333,7 @@ const Modal = (($) => {
         this._backdrop.className = ClassName.BACKDROP
 
         if (animate) {
-          $(this._backdrop).addClass(animate)
+          this._backdrop.classList.add(animate)
         }
 
         $(this._backdrop).appendTo(document.body)
@@ -436,29 +436,37 @@ const Modal = (($) => {
 
         // Adjust fixed content padding
         $(fixedContent).each((index, element) => {
-          const actualPadding = $(element)[0].style.paddingRight
+          const actualPadding = element.style.paddingRight
           const calculatedPadding = $(element).css('padding-right')
-          $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+          $(element)
+            .data('padding-right', actualPadding)
+            .css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
         })
 
         // Adjust sticky content margin
         $(stickyContent).each((index, element) => {
-          const actualMargin = $(element)[0].style.marginRight
+          const actualMargin = element.style.marginRight
           const calculatedMargin = $(element).css('margin-right')
-          $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
+          $(element)
+            .data('margin-right', actualMargin)
+            .css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
         })
 
         // Adjust navbar-toggler margin
         $(navbarToggler).each((index, element) => {
-          const actualMargin = $(element)[0].style.marginRight
+          const actualMargin = element.style.marginRight
           const calculatedMargin = $(element).css('margin-right')
-          $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
+          $(element)
+            .data('margin-right', actualMargin)
+            .css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
         })
 
         // Adjust body padding
         const actualPadding = document.body.style.paddingRight
         const calculatedPadding = $(document.body).css('padding-right')
-        $(document.body).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+        $(document.body)
+          .data('padding-right', actualPadding)
+          .css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
       }
     }
 
@@ -468,12 +476,15 @@ const Modal = (($) => {
       $(fixedContent).each((index, element) => {
         const padding = $(element).data('padding-right')
         if (typeof padding !== 'undefined') {
-          $(element).css('padding-right', padding).removeData('padding-right')
+          $(element)
+            .css('padding-right', padding)
+            .removeData('padding-right')
         }
       })
 
       // Restore sticky content and navbar-toggler margin
-      $(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
+      const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`))
+      $(elements).each((index, element) => {
         const margin = $(element).data('margin-right')
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right')
@@ -535,7 +546,7 @@ const Modal = (($) => {
     const selector = Util.getSelectorFromElement(this)
 
     if (selector) {
-      target = $(selector)[0]
+      target = document.querySelector(selector)
     }
 
     const config = $(target).data(DATA_KEY)
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 02cab5372d..bf6d49234a 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -115,7 +115,7 @@ const ScrollSpy = (($) => {
 
       this._scrollHeight = this._getScrollHeight()
 
-      const targets = $.makeArray(document.querySelectorAll(this._selector))
+      const targets = [].slice.call(document.querySelectorAll(this._selector))
 
       targets
         .map((element) => {
@@ -123,7 +123,7 @@ const ScrollSpy = (($) => {
           const targetSelector = Util.getSelectorFromElement(element)
 
           if (targetSelector) {
-            target = $(targetSelector)[0]
+            target = document.querySelector(targetSelector)
           }
 
           if (target) {
@@ -250,7 +250,7 @@ const ScrollSpy = (($) => {
                `${selector}[href="${target}"]`
       })
 
-      const $link = $(queries.join(','))
+      const $link = $([].slice.call(document.querySelectorAll(queries.join(','))))
 
       if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
         $link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
@@ -271,7 +271,8 @@ const ScrollSpy = (($) => {
     }
 
     _clear() {
-      $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
+      const nodes = [].slice.call(document.querySelectorAll(this._selector))
+      $(nodes).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
     }
 
     // Static
diff --git a/js/src/tab.js b/js/src/tab.js
index 365613ff25..fe5478dbf0 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -106,7 +106,7 @@ const Tab = (($) => {
       }
 
       if (selector) {
-        target = $(selector)[0]
+        target = document.querySelector(selector)
       }
 
       this._activate(
@@ -199,7 +199,8 @@ const Tab = (($) => {
           $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
         const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
         if (dropdownElement) {
-          $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
+          const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
+          $(dropdownToggleList).addClass(ClassName.ACTIVE)
         }
 
         element.setAttribute('aria-expanded', true)
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 3d4e93f2b8..56c1aa0d15 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -418,9 +418,9 @@ const Tooltip = (($) => {
     }
 
     setContent() {
-      const $tip = $(this.getTipElement())
-      this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
-      $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
+      const tip = this.getTipElement()
+      this.setElementContent($(tip.querySelectorAll(Selector.TOOLTIP_INNER)), this.getTitle())
+      $(tip).removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
     }
 
     setElementContent($element, content) {
@@ -655,7 +655,7 @@ const Tooltip = (($) => {
     _cleanTipClass() {
       const $tip = $(this.getTipElement())
       const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
-      if (tabClass !== null && tabClass.length > 0) {
+      if (tabClass !== null && tabClass.length) {
         $tip.removeClass(tabClass.join(''))
       }
     }