Element.querySelector未定义

Question

为什么此代码在控制台中显示错误TypeError: pizzaBox.querySelector is not a function. (In 'pizzaBox.querySelector('h6')', 'pizzaBox.querySelector' is undefined)？

function addToppingsToAll (toppings)
{
    var pizzaBoxHolder = document.getElementById("PizzaBoxHolder");
    var PizzaBoxList   = pizzaBoxHolder.childNodes;
    for ( var i = 0 ; i < pizzaBoxList.length ; i++ )
    {
        var pizzaBox            = pizzaBoxList[i];
        toppingList             = pizzaBox.querySelector('h6');
        toppingList.textContent = "You have " + toppings " on your pizza";
    }
}

Answer 1

您的代码中至少有三个问题：

1. 您可能正在迭代一些没有.querySelector()方法的文本节点。
2. 您没有初始化for循环迭代变量i
3. 您正在尝试使用未声明的变量lineBoxList。

只需使用.querySelectorAll()并让选择器为您完成更多工作，即可简化操作。

function addToppingsToAll (toppings) {
    var toppingItems = document.querySelectorAll("#PizzaBoxHolder h6");
    for (var i = 0; i < toppingItems.length; i++) {
        toppingItems[i].textContent = "You have " + toppings " on your pizza";
    }
}

Answer 2

querySelector是一种出现在HTML元素节点上的方法。 childNodes中的一个或多个必须是某种不是元素的节点（例如文本节点或注释节点）。

这可能最容易解决：

var PizzaBoxList   = document.querySelector("#PizzaBoxHolder > *");