I have below mark-up . I am doing some DOM manipulation.I am trying to do using vanila js instead of jquery .

In jQuery i am writing like this

var $window = $(window),
            $container = $('.rc105w1'),
            $categories = $('.rc105w2'),
            $counts = $('.rc105count'),
            $productLists = $('.rc105w3'),
            vdub = window.innerWidth,
            resizeTimeout;
        labelCategories();
        function labelCategories() {

            var row = 1,
                prevoffset = 0,
                guid = 0,
                offset;
            $categories.each(function() {

                var $category    = $(this),
                    $productList = $category.find($productLists),
                    $link        = $category.find('> a');

                console.log($productList.length,'product length')
                console.log($link.length,'link length')
            });

        }
    })

using this line $category.find($productLists) I am checking number of descendent or matching elements

I want to do same thing using vanilla js .I tried like this

function init(){

        console.log('javascript code start')
        var $window = window,
            $container = document.querySelectorAll('.rc105w1'),
            $categories = document.querySelectorAll('.rc105w2'),
            $counts = document.querySelectorAll('.rc105count'),
            $productLists = document.querySelectorAll('.rc105w3'),
            vdub = window.innerWidth,
            resizeTimeout;
        labelCategories();
        function labelCategories() {

            var row = 1,
                prevoffset = 0,
                guid = 0,
                offset;
            $categories.forEach(function(el) {

                var $category    = el,
                    $productList = $category.querySelectorAll($productLists),
                    $link        = $category.querySelectorAll('> a');

                console.log($productList.length,'javasscript $productList length ')
                console.log($link.length ,'javasscript $link length ')
            });

        }
    }
    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete" || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }
    docReady(init)

I am not able to find matching element or descendent elements any way to find using javascript ?

<section >
    <div >
        <div >
            <div >
                <a href="/cloud/migrate-applications-to--cloud/">
                    <span> Applications</span>
                </a>
            </div>
            <div >
                <a href="/cloud/migrate-custom-applications-to-cloud/">
                    <span>Custom Applications</span>
                </a>
            </div>
        </div>
        <div >
            <div >
                <a href="#developer-services">
                    <span>Developer Services</span>
                </a>
                <div >
                    <h3>Developer Services</h3>
                    <p>Build, deploy, and manage modern cloud applications using developer friendly tools and services.</p>
                    <div >

                        <div >
                            <h4>Build and run</h4>
                            <ul >
                                <li><a href="/cloud-native/api-gateway/">API Gateway</a></li>
                                <li><a href="/cloud-native/api-management/">API Management</a></li>
                            </ul>
                        </div>

                        <div >
                            <h4>Low code</h4>
                            <ul >
                                <li><a href="/application-development/apex/">Application Express (APEX)</a></li>
                                <li><a href="/application-development/visual-builder/">Visual Builder Studio</a></li>
                            </ul>
                        </div>

                        <div >
                            <h4>Extend</h4>
                            <ul >
                                <li><a href="/integration/application-integration/">Application Integration</a></li>
                                <li><a href="/content-experience/">Content Management</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div >
                <a href="#containers-and-functions">
                    <span>Containers and Functions</span>
                </a>
                <div >
                    <h3>Containers and Functions</h3>
                    <p>Deploy microservices applications on high-performance, managed open source Docker, Kubernetes, and Fn Functions services.</p>
                    <div >
                        <div >
                            <ul >
                                <li><a href="/cloud-native/functions/">Functions</a></li>
                                <li><a href="/cloud-native/container-engine-kubernetes/">Kubernetes Engine</a></li>
                                <li><a href="/cloud-native/container-registry/">Registry</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CodePudding user response：

querySelectorAll() expects a selector not a (static) Nodelist.

To make your code work you can just pass the selector like you do with $link.

$productList = $category.querySelectorAll('.rc105w3')

CodePudding user response：

Maybe the problem occurs when you try to use querySelectorAll, because it will provide you an array, so try using querySelector instead of querySelectorAll and also querySelectorAll expects a selector not a Nodelist