时间戳

首页 > 解决方案 > DOMException：无法在“文档”上执行“querySelector”：

javascript - DOMException：无法在“文档”上执行“querySelector”：

问题描述

我正在做一个项目，我开始在 bootstrap 4.3.1 上构建。

我对这个 Javascript 和 html 编码很着迷。

<a class="dropdown-item" href="{{ route('user.panel') }}">
    User panel
</a>

我在控制台中收到此错误。

SyntaxError: ' http://localhost:8000/user/panel ' 不是一个有效的选择器

bootstrap.min.js:6 未捕获的 DOMException：无法在“文档”上执行“querySelector”：“ http://localhost:8000/user/panel ”不是有效的选择器。在 Object.getSelectorFromElement ( http://localhost:8000/themes/js/bootstrap.min.js:6:1466 ) 在http://localhost:8000/themes/js/bootstrap.min.js:6:46766 在Array.map () 在 ntrefresh ( http://localhost:8000/themes/js/bootstrap.min.js:6:46740 ) 在 new n ( http://localhost:8000/themes/js/bootstrap.min 。 js:6:46381 )

我发现它是由于下拉菜单而发生的，因为这个错误下拉菜单不起作用。我还检查了，如果我使用的是 href="javascript:void(0);", href="#!" 发生错误，但如果我使用没有 href 或 href="#" 的锚标记，那么它工作正常。

只有上帝

注意：我需要带有 href="javascript:void(0); 的解决方案；因为地址链接中的 href="# 看起来不漂亮，并且页面向上滚动到顶部。

<ul class="navbar-nav">
    @guest
    <li class="navbar-item dropdown">
        <a href="#" class="nav-link" data-toggle="dropdown">Register/Login<i class="fas fa-sort-down"></i></a>
        <div class="dropdown-menu text-right m-2 position-absolute" style="width:300px;left:-111px;">
            <a href="{{ route('login') }}" class="btn btn-primary d-block m-3">Login</a>
            <span class="m-3">Are you new user?<a href="{{ route('register') }}" class="link-sign">Login</a></span>
        </div>
    </li>
    @else
        <li class="nav-item dropdown">
            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                {{ Auth::user()->first_name }}&nbsp;{{ Auth::user()->last_name }} <span class="caret"></span>
            </a>

            <div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{{ route('user.panel') }}">
                    User Panel
                </a>
                <a class="dropdown-item" href="#" id="logout-button">
                    {{ __('Logout') }}
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            </div>
        </li>
    @endguest
</ul>

错误出现在以下行中。

$('body').scrollspy({
    target: '#mainNav',
    offset: 50
});

脚本.js

(function($) {
    "use strict"; // Start of use strict

    // Smooth scrolling using jQuery easing
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: (target.offset().top - 54)
                }, 1000, "easeInOutExpo");
                return false;
            }
        }
    });

    // Closes responsive menu when a scroll trigger link is clicked
    $('.js-scroll-trigger').click(function() {
        $('.navbar-collapse').collapse('hide');
    });

    // Activate scrollspy to add active class to navbar items on scroll
    $('body').scrollspy({
        target: '#mainNav',
        offset: 50
    });

})(jQuery); // End of use strict

AOS.init({
    easing: 'ease-in-out-sine'
});

$('#logout-button').on('click', function(e) {
    e.preventDefault();
    $('#logout-form').submit();
});


$('#select').change(function() {
    var $selected = $(this).find(':selected');
    $('#description').html($selected.data('description'));
}).trigger('change');
$("#select").change(function() {
    var color = $(this).val();
    if (color == "laptop_repair") {
        $(".box").not(".laptop_repair").hide();
        $(".laptop_repair").show();
    } else if (color == "install_windows") {
        $(".box").not(".install_windows").hide();
        $(".install_windows").show();
    } else if (color == "backup") {
        $(".box").not(".backup").hide();
        $(".backup").show();
    } else if (color == "antivirus") {
        $(".box").not(".antivirus").hide();
        $(".antivirus").show();
    } else if (color == "magenta") {
        $(".box").not(".magenta").hide();
        $(".magenta").show();
    } else {
        $(".box").hide();
    }
});
getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
        var hrefAttr = element.getAttribute('href');
        selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
    }

    return selector && document.querySelector(selector) ? selector : null;
}

标签： javascripthtmlcssbootstrap-4laravel-5.8

解决方案

该错误来自 Bootstrap 的scrollspy组件，该组件明确指出：

Anchors () 是必需的，并且必须指向具有该 id 的元素。

或者

导航栏链接必须具有可解析的 id 目标。例如，a<a href="#home">home</a>必须对应 DOM 中的某些内容，例如 <div id="home">.

你有几个解决方案：

  1. 将 scrollspy 目标从#mainNav更窄的内容更改为不包括.navbar-nav

  2. 如果您想跟踪/监视 . 中的链接.navbar-nav，则需要破解 scrollspy 源或使用其他一些组件

  3. 保持一切原样，但在锚点中使用有效的本地链接。

推荐阅读