CODEWITHSUNDEEP
javascriptgetelementsbyclassname
a86
a86

Reputation: 119

getElements returns only few elements

Unable to understand the behavior of getElements

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

Here is the output

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

I do not understand why is the length 1 when there are many elements found with the classname 'logo-save'

Can somebody explain me what is happening here?

Upvotes: 1

Views: 67

Answers (1)

a86
a86

Reputation: 119

The problem is due to dynamic changes to the DOM while the logging is being done.

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

Setting a delay like above resolved the issue.

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

Upvotes: 1

Related Questions