document.body.querySelectorAll（）失败但document.getElementsByClassName（）有效

Question

我必须得到一些形式的元素来改变他们的onchange的风格<select>。我将类new_cat_inputs添加到元素中，我想我会通过document.querySelectorAll()得到它们。 我尝试了很多东西，但它从未奏效，我终于使用了：

document.getElementsByClassName("new_cat_inputs")

这意味着我的问题已经解决但我想了解。 这是我以前尝试过的：

// first attempt, as I'd have used document.querySelector() which works this way
document.querySelectorAll(".new_cat_inputs");

// Logs an error which says it can't read the property "querySelectorAll" of null (body)
document.body.querySelectorAll(".new_cat_inputs");

// doesn't get the elements neither as the 1st attempt. Neither with document.body
document.querySelectorAll("label.new_cat_inputs, input.new_cat_inputs, select.new_cat_inputs");

我读了MDN documentation，这通常有帮助，但不是这次。 通过函数document.querySelectorAll()在整个文档中按类选择多个DOM元素的正确方法是什么？

Answer 1

因为在你的例子中document.body似乎是null，这意味着没有加载DOM。以下事件侦听器允许您等待加载DOM，然后执行您的代码：

window.addEventListener('DOMContentLoaded', function() {
  // your code
})

我认为（我不确定）你使用getElementsByClassName是因为你在其他地方使用它或者在加载DOM时使用它。并且由于此方法返回实时HTMLCollection，因此在加载DOM时会更新它。

见the following link

干杯，