cambiar contenido de un elemento

[dukeblass]

Tengo un ul

Código HTML:

<ul id="lista" class="lista">
  <li><a>Elemento 1</a></li>
  <li><a>Elemento 2</a></li>
  <li><a>Elemento 3</a></li>
  <li><a>Elemento 4</a></li>
  ...
</ul>
 

la cual capturo con javascript:

Código Javascript:

var lista =  document.getElementById('lista'); // exactamente así-> s('.lista')[0]; "pero al final hace la llamada al elemento  de igual forma"
 
// luego capturos sus hijos
 var hijosLista = lista.getElementsByTagName('li');
 
// y antes de continuar cambio el valor de la lista a un solo elemento "cargando"
 
lista.innerHTML = '<li>Cargando..</li>'
 
//y sigo con lo demas
 
....
 
console.log(hijosLista );
 

el problema esta que al cambiar el contenido de la Lista, lugo al entrar a la variable hijosLista ella me devuelve -> <li>Cargando..</li>, y no lo que la lista tenia antes..


¿ello por que sucede....? >>

[zerokilled]

¡buenas!
sucede porque estás modificando el contenido del elemento. cuando obtienes los elementos por getElementsByTagName no obtienes una copia de dichos elementos. por el contrario obtienes una lista (o colección) de elementos a partir de un elemento. esa colección, aunque parece ser un objeto fijo, en realidad es un objeto dinámico o activo que devuelve los elementos de acuerdo al estado actual del elemento donde se invoca el método. digamos que tiene cierta similitud a un evento, solo que en lugar de ser activado por una acción en particular, el objeto siempre está pendiente de cualquier cambio que ocurra en el elemento principal (en tu caso UL).

para que puedas entenderlo, imagina un elemento UL vacío. obtienes la colección de elementos LI a partir del elemento UL. cuando verificas la longitud (length), indica 0. luego agregas 3 elementos LI. vuelve a verificar la lontigud de elementos (sin invocar getElementsByTagName) desde la misma colección anterior. esta vez devuelve 3.