javascript - getElements 仅返回少数元素

Question

无法理解 getElements 的行为

var ele = document.getElementsByClassName('logo-save');
console.log('Elements',ele);
console.log('Length',ele.length);

这是输出

Elements [button#save_setting.btn.btn-default.logo-save, save_setting: button#save_setting.btn.btn-default.logo-save]
0: button#save_device.btn.btn-default.logo-save
1: button#save_prog.btn.btn-default.logo-save
2: button#save_prog.btn.btn-default.logo-save
3: button#save_param.btn.btn-default.logo-save
4: button#save_param.btn.btn-default.logo-save
5: button#save_setting.btn.btn-default.logo-save
length: 6
save_device: button#save_device.btn.btn-default.logo-save
save_param: button#save_param.btn.btn-default.logo-save
save_prog: button#save_prog.btn.btn-default.logo-save
save_setting: button#save_setting.btn.btn-default.logo-save

Length 1

我不明白为什么当找到很多类名'logo-save'的元素时长度为1

有人可以解释一下这里发生了什么吗？

Answer 1

该问题是由于在完成日志记录时对 DOM 进行动态更改造成的。

var delay=5000;
setTimeout(function(){
    var ele = document.getElementsByClassName('logo-save');
    console.log('Elements',ele);
    console.log('Length',ele.length);
}, delay);

像上面那样设置延迟解决了这个问题。

Elements [button#save_device.btn.btn-default.logo-save,  button#save_prog.btn.btn-default.logo-save,
button#save_prog.btn.btn-default.logo-save, 
button#save_param.btn.btn-default.logo-save, 
button#save_param.btn.btn-default.logo-save, 
button#save_setting.btn.btn-default.logo-save, 
save_device: button#save_device.btn.btn-default.logo-save, 
save_prog: button#save_prog.btn.btn-default.logo-save, 
save_param: button#save_param.btn.btn-default.logo-save, 
save_setting: button#save_setting.btn.btn-default.logo-save]
Length 6