查找动态添加的elem.firstChild

Find dynamically added elem.firstChild

本文关键字：elem firstChild 添加 动态 查找      更新时间：2023-09-26

我有一些代码用于动态添加带有内容的选项卡。删除选项卡时，eventListener会启动一个回调函数，该函数以选项卡+内容的数组作为参数。

[newTab]-动态创建的选项卡阵列

[newContent]-动态创建的div数组（选项卡内容）这是它的代码：

    tabSpan.addEventListener("click", removeTab([newTab, newContent]));

问题是，当我删除一个类为活动的选项卡时，如果它存在，我需要将该类传递给数组中的第一个选项卡，如果不存在，则什么也不做。我试图解决的问题是，我的removeTab函数没有得到newTab数组的第一个子级。

    //Remove tab
    function removeTab(nodeArr) {
    return function() {

        nodeArr.forEach(function(el) {
           el.parentNode && el.parentNode.removeChild(el);
        });
        console.log(tabs.closest("li.item"));
    };
 }

控制台日志显示空

在我的情况下，如何检索firstChild以将类活动传递给它？

HTML（不要注意defaultTab，在这种情况下它不算作firstChild）：

<div class="wrap">
    <ul id="tabs">
        <li id="defaultTab" class="tab default">
                <span>+</span>
        </li>

    </ul><!--Tabs ul End-->
    <div id="defaultDiv" class="content default">
    </div>

JS Bin DEMO

它显示为null，因为最接近的是它的父级，而不是子级。

closest（）方法是什么

根据MDN

方法返回匹配的当前元素（或当前元素本身）参数中给定的选择器。

什么是祖先

根据W3school

祖先是父母、祖父母、曾祖父母等等

所以我们应该寻找子元素。我们可以在这里使用querySelector（）。

什么是querySelector

根据MDN

返回文档中的第一个元素

此外，我们必须避免javascript在DOM之前加载，并且可以在此处使用setTimeout。所以最后的代码是

setTimeout(function waitDom() {
    tabs.querySelector("*").classList.add("active");
    defaultDiv.querySelector("*").classList.add("active");
   }, 0);
};

这是正在工作的小提琴手

相关文章：