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

- Bill Bllson

---

将 childNodes 替换为 children，看看是否解决了问题？ - adeneo

lineBoxList是什么？我没有在任何地方看到它被定义。难道不应该是pizzaBoxList吗？编辑：您还应该在for循环中初始化索引变量，var i = 0。 - Daniel Flint

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

- jfriend00

---

这很有帮助，但是现在在for循环声明中的ToppingItems.length不起作用。有没有解决的办法？ - Bill Bllson

@BillBllson - 你是否已经改用了我的代码所示的 .querySelectorAll()？它返回一个具有 .length 属性（它是类似数组的对象）的 nodeList。此外，请检查您的大小写。我正在使用 toppingItems 和 toppingItems.length。 - jfriend00

我做了所有这些。在修订时，我意识到for循环没有问题，但是toppingItems.length返回0。如果有关系的话，PizzaBoxHolder是一个HTML div，其中至少包含1个div，在其内部，每个内部div都恰好有1个h6，因此h6不是PizzaBoxHolder的直接子元素。 - Bill Bllson

@BillBllson - 请在你的问题中添加相关的HTML代码，我会发布一个工作的jsFiddle链接来展示代码如何工作。目前为止，我看不到你正在使用的确切代码或HTML，所以我对你做错了什么一无所知。h6元素是子元素也没关系。 - jfriend00

Answer 2

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

可能最容易解决这个问题的方法是：

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

- Quentin