查找动态添加的elem.firstChild

Question

我已经获得了动态添加内容标签的代码。删除选项卡时，eventListener会启动一个回调函数，该函数将一个tab + content数组作为参数。

[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"));
    };
 }

console.log 显示 null

如何在我的案例中检索 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

Answer 1

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

什么是nearest（）方法？

根据MDN

  

Element.closest（）方法返回最接近的祖先   当前元素（或当前元素本身）匹配的   参数中给出的选择器。

什么是祖先？

根据W3school

  

祖先是父母，祖父母，曾祖父母等等。

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

什么是querySelector？

根据MDN

  

返回文档中的第一个元素

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

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

Here是工作小提琴手。