如何在javascript中找到子代元素？

Question

我的成绩低于标准。我正在做一些DOM操作，我试图使用vanila而不是jquery。

在jQuery中，我是这样写的

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')
            });

        }
    })

使用这行$category.find($productLists)，我正在检查number of descendent or matching elements

我也想用香草js做同样的事，.I试过这样

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)

我无法找到匹配的元素或子代元素使用javascript找到什么方法？

<section class="rc105 rc105v0">
    <div class="cwidth">
        <div class="rc105w1">
            <div class="rc105w2 rc105w2-bttn">
                <a href="/cloud/migrate-applications-to--cloud/">
                    <span> Applications</span>
                </a>
            </div>
            <div class="rc105w2 rc105w2-bttn">
                <a href="/cloud/migrate-custom-applications-to-cloud/">
                    <span>Custom Applications</span>
                </a>
            </div>
        </div>
        <div class="rc105w1 rw-scrim-neutral-40bg">
            <div class="rc105w2 rc105w2-drawer rc105w2-6up rc105w2-12set rc105w2-tallbttn">
                <a href="#developer-services">
                    <span>Developer Services</span>
                </a>
                <div class="rc105w3">
                    <h3>Developer Services</h3>
                    <p>Build, deploy, and manage modern cloud applications using developer friendly tools and services.</p>
                    <div class="rc105w4">

                        <div class="rc105w5 rc105w5-half">
                            <h4>Build and run</h4>
                            <ul class="rc105linklist rc105w5-2col">
                                <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 class="rc105w5 rc105w5-quarter">
                            <h4>Low code</h4>
                            <ul class="rc105linklist">
                                <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 class="rc105w5 rc105w5-quarter">
                            <h4>Extend</h4>
                            <ul class="rc105linklist">
                                <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 class="rc105w2 rc105w2-drawer rc105w2-6up rc105w2-12set rc105w2-tallbttn">
                <a href="#containers-and-functions">
                    <span>Containers and Functions</span>
                </a>
                <div class="rc105w3">
                    <h3>Containers and Functions</h3>
                    <p>Deploy microservices applications on high-performance, managed open source Docker, Kubernetes, and Fn Functions services.</p>
                    <div class="rc105w4">
                        <div class="rc105w5">
                            <ul class="rc105linklist">
                                <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>

Answer 1

querySelectorAll()需要一个选择器，而不是(静态) Nodelist。

为了使您的代码正常工作，您可以像使用$link一样传递选择器。

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

Answer 2

当您尝试使用querySelectorAll时，可能会出现问题，因为它将为您提供一个数组，所以尝试使用querySelector而不是querySelectorAll，querySelectorAll也需要选择器而不是Nodelist。