如何以JavaScript中特定的class定位所有元素

Question

我目前正在使用 WordPress 和 Bootstrap 5。

由於wp_nav_men function 的 WordPress 限制。我根本看不到標記。 這意味着我不能在這里和那里手動添加類。 我需要這樣做才能使 Bootstrap 子菜單導航正常工作。 這意味着我需要使用 JavaScript 將特定的東西注入某些元素以

為了實現這一點，我似乎需要獲得具有相同 class 名稱的其他子節點來繼承相同的 JavaScript 設置。 這就是我想要做的。 下面我列出了我在標記中看到的內容、我希望看到的步驟以及 JavaScript 當前的樣子。

標記：

<ul id="mainNav" class="menu">
    <li id="menu-item-84" class="menu-item-has-children  highlight"><a href="" id="dropdownMenuLink" role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle show" aria-expanded="true"></a>
        
        <ul class="sub-menu dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(906px, 61px, 0px);" data-popper-placement="bottom-start">
            <li id="menu-item-269" class="menu-item-has-children"><a href=""></a>
                <ul class="sub-menu">
                    <li id="menu-item-271" class=""><a href=""></a></li>
                    <li id="menu-item-272" class=""><a href=""></a></li>
                    <li id="menu-item-270" class=""><a href=""></a></li>
                </ul>
            </li>
        </ul>
        
    </li>
    <li id="menu-item-101" class=""><a href="">Product</a></li>
    <li id="menu-item-103" class="menu-item-has-children"><a href="">About Us</a>
        <ul class="sub-menu">
            <li id="menu-item-228" class=""><a href="">About Us</a></li>
            <li id="menu-item-105" class=""><a href="">News and Events</a></li>
            <li id="menu-item-106" class=""><a href="">Join Our Team</a></li>
        </ul>
    </li>
    <li id="menu-item-99" class=""><a href="">Contact</a></li>
</ul>

第1步：
如果任何li的 class 為.menu-item-has-children ，請將以下id 、 role 、 data-bs-toggle和class到該元素。

第2步：
任何帶有 class 的.menu-item-has-children以及帶有ul的li都會有一個子導航菜單。 因此，子導航菜單必須繼承以下class的dropdown-menu 。

    // Toggle child menu item in main nav

    // assign expanse li to variable
    let liExpanse = document.querySelector('.menu-item-has-children');

    // check if nested ul is contained in parent li of main nav
    let liExpanseChild = document.querySelector('.sub-menu');

    // add id, role, data attributes to div
    function addAtt() {
        liExpanse.firstChild.setAttribute('id','dropdownMenuLink');
        liExpanse.firstChild.setAttribute('role','button');
        liExpanse.firstChild.setAttribute('data-bs-toggle','dropdown');
    }
    addAtt();

    // add classnames to divs
    function addClassName() {
        liExpanse.firstChild.classList.add('nav-link', 'dropdown-toggle');
        liExpanseChild.classList.add('dropdown-menu');
    }
    addClassName();

想法：
我確實注意到，在使用firstChild方法時，它只會查找第一個孩子。 還有一個lastChild選項，但我正在尋找的是找到.menu-item-has-children的 class 的所有節點，然后執行以下操作。

通過一些研究並根據評論，我實際上不希望 querySelectorAll 獲取與 class 或 ID 相關的所有內容。 就一層。

Answer 1

頂級元素將以.menu作為其父元素。 您也可以在其位置使用#mainNav 。 在 css >中，表示左邊的事物是右邊事物的直接父級。

頂級錨點選擇器

document.querySelectorAll(".menu > .menu-item-has-children > a")

頂級子菜單選擇器

document.querySelectorAll(".menu > .menu-item-has-children > .sub-menu")

如果更方便的話，使用父代的 id 而不是 class

document.querySelectorAll("#mainNav > .menu-item-has-children > .sub-menu")