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

干杯，

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

1 个答案: