document.body.querySelectorAll()失败但document.getElementsByClassName()有效

问题描述 投票:0回答:1

我必须得到一些形式的元素来改变他们的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元素的正确方法是什么?

javascript html dom css-selectors selectors-api
1个回答
1
投票

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

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

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

the following link

干杯,

© www.soinside.com 2019 - 2024. All rights reserved.