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

Question

我正在做一个项目，我开始在 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() 在 n.t.refresh (http://localhost:8000/themes/js/bootstrap.min.js:6:46740) 在新的 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
});

script.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;
}

Answer 1

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

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

或

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

你有几个解决方案：

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

2. 如果您想跟踪/窥探 .navbar-nav 内的链接，则需要破解 scrollspy 源或使用其他组件

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