无法通过 querySelectorAll("class") 获取元素，在工厂函数中赋值 class

Question

我通过工厂函数创建了 3 个按钮并为它们分配了 class“btn”和 return 对象，现在我想访问所有具有 class“btn”的按钮，但我得到一个空的 NodeList

我想在标签变量

中存储所有具有class“btn”的按钮

        const tabButton = function(name)
        {
            const button = document.createElement("button")                     // button creation
            button.innerText = name
            button.classList.add("btn")
            return {button}
        }

        const Header = function()
        {
            const homeButton = tabButton("Home").button
            const MenuButton = tabButton("Menu").button                         
            const ContactButton = tabButton("Contact").button
      
            const tabs = document.querySelectorAll(".btn")   
            console.log(tabs)  // giving NULL value
            return {tabs}
        }

Answer 1

您的 tabButton 函数调用会创建元素，但不要将它们放在文档中的任何位置。 document.querySelectorAll 仅查找文档中的元素。如果将这些按钮放在文档中，它们会被 document.querySelectorAll 找到，但是没有一个函数可以遍历内存中各处的每个对象以查看它是否是匹配的按钮。只有查看文档或特定元素的函数。

下面的示例显示了将这些按钮放入文档之前和之后的结果：

const tabButton = function(name) {
    const button = document.createElement("button");
    button.innerText = name;
    button.classList.add("btn");
    return {button};
};

const Header = function() {
    const homeButton = tabButton("Home").button;
    const menuButton = tabButton("Menu").button;
    const contactButton = tabButton("Contact").button;

    console.log(document.querySelectorAll(".btn").length); // 0
    document.body.appendChild(homeButton);
    console.log(document.querySelectorAll(".btn").length); // 1
    document.body.appendChild(menuButton);
    console.log(document.querySelectorAll(".btn").length); // 2
    document.body.appendChild(contactButton);
    console.log(document.querySelectorAll(".btn").length); // 3
    const tabs = document.querySelectorAll(".btn");
    return {tabs};
};

Header();

无法通过 querySelectorAll("class") 获取元素，在工厂函数中赋值 class

Unable to obtain element through querySelectorAll("class") , class assigned in factory function

javascript

factory

queryselector