Question

我是初学者，我使用纯javascript进行DOM操作。我无法在我的section元素中获取所有div。我得到了不确定。请告诉我错误是什么以及如何解决。

HTML

    <section class="main-content">
        <aside>
            <p>
                <span class="sidebartext">Watch this space for breaking news items.</span>
            </p>
        </aside>

        <section class="notes">
            <div id="Services" class="nav-pages active">Services</div>
            <div id="Resources" class="nav-pages">Resources</div>
            <div id="Contact-Us" class="nav-pages">Contact Us</div>
            <div id="Company" class="nav-pages">Company</div>
        </section>

    </section>

JS

var navTabs = document.getElementsByClassName('notes').children;
console.log(navTabs);//undefined

请不要jQuery回答!!!

Answer 1

getElementsByClassName返回数组元素（实际上，类似于数组 - 请参阅下面的@Hamms注释），因此children未定义。如果只有一个备注部分，您可以选择使用id="notes"代替（getElementById）或迭代上面的数组并从中访问子代。

Answer 2

这是因为 getElementsByClassName 会返回HTMLCollection或NodeList。如果你只是控制日志那个元素，＆＃34; notes＆＃34;你会明白为什么你会得到一个未定义的。

用以下代码替换你的JS代码：

var navTabs = document.getElementsByClassName('notes');
console.log(navTabs);

这将输出一个数组，一旦展开，它将显示位置[0]的内容。如果展开那个，您将获得标记为 childNodes 的NodeList。展开它，你将获得你的div。

尝试这样直接获取你的div：

console.log('Items: ',navTabs[0].childNodes);

无法按类名

2 个答案: