How to target all elements with a specific class in JavaScript-CodePudding

I'm currently working with WordPress and Bootstrap 5.

Due to WordPress limitations with the wp_nav_men function. I can't see the markup at all. This means I can't manually added classes here and there. I need to do this in order to get the Bootstrap sub menu navs to work. This means I need to use JavaScript to inject specific things to certain elements to

For me to achieve this, it would seem I need to get additional child nodes with the same class names to inherit the same JavaScript settings. Here's what I am trying to do. Below I have listed what I see in the markup, the steps I would like to see happen, and what the JavaScript looks like currently.

MARKUP:

<ul id="mainNav" >
    <li id="menu-item-84" ><a href="" id="dropdownMenuLink" role="button" data-bs-toggle="dropdown"  aria-expanded="true"></a>
        
        <ul  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" ><a href=""></a>
                <ul >
                    <li id="menu-item-271" ><a href=""></a></li>
                    <li id="menu-item-272" ><a href=""></a></li>
                    <li id="menu-item-270" ><a href=""></a></li>
                </ul>
            </li>
        </ul>
        
    </li>
    <li id="menu-item-101" ><a href="">Product</a></li>
    <li id="menu-item-103" ><a href="">About Us</a>
        <ul >
            <li id="menu-item-228" ><a href="">About Us</a></li>
            <li id="menu-item-105" ><a href="">News and Events</a></li>
            <li id="menu-item-106" ><a href="">Join Our Team</a></li>
        </ul>
    </li>
    <li id="menu-item-99" ><a href="">Contact</a></li>
</ul>

STEP 1:
If any li with a class of .menu-item-has-children, add the following id, role, data-bs-toggle and class to the element.

STEP 2:
Any li with a with a class of .menu-item-has-children also with a ul will have a sub nav menu. Because of this, the sub nav menu must inherit the following class of 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();

THOUGHTS:
I do notice that when using firstChild methods, it only looks for the first child. There is also a lastChild option, but what I am looking for is to find all nodes with a class of .menu-item-has-children, then do the following.

Any suggestions is greatly appreciated! Thanks for reading!

UPATE: With some research and based on comments, I actually don't want the querySelectorAll to pick up on all that is related to that class or ID. Just the one level.

CodePudding user response：

Top-level elements will have .menu as their parent. You could also use #mainNav in its place. In css > means thing on the left is a direct parent of thing on the right.

Top-level anchor selector

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

Top-level submenu selector

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

Using the id of the parent instead of the class, if its more convenient

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