2015-12-28 2 views
1

Невозможно понять поведение getElementsgetElements возвращает несколько элементов

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 

Я не понимаю, почему длина 1, когда есть много элементов, найденных с classname 'logo-save'

Может кто-нибудь объяснить мне, что здесь происходит?

+2

Что-то еще должно продолжаться. Он отлично работает [здесь] (https://jsfiddle.net/1q3dmspv/). Можете ли вы разместить сегмент своего html? –

+0

Существует больше кода между первым 'console.log()' и вторым, не так ли? Вы меняете элементы. Список узлов, возвращаемый из 'getElementsByClassName()', является ** live **, и список изменится при изменении элементов. – Pointy

+0

Стоит отметить, что 'getElementsByClassName()' возвращает живой NodeList, есть ли что-нибудь между 'console.log()' вызовами, которые могут изменять или удалять найденные элементы? Попробуйте использовать 'document.querySelectorAll ('logo-save')', который возвращает неживую коллекцию. –

ответ

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