JavaScript obtener elementos secundarios por className

Question

que han escrito la siguiente línea en Javascript:

var eleCategory = document.getElementById("cmbCategory"); 

Ahora quiere encontrar todos elementbyClassName contenido en el elemento eleCategory.

¿Es posible con algo como esto?

var eleChild = eleCategory.getElementByClassName("autoDropdown"); 

¿Cómo puedo obtener el elemento hijo del elemento padre?

Answer 1

getElementsByClassName no se ha implementado en todos los navegadores. Niels' solution, por ejemplo, no funciona en IE. Sin embargo, otros han creado su propia implementación; John Resig tiene un reportaje en his blog

Answer 2

Si es posible, consulte este violín: http://jsfiddle.net/ajAY2/

Pero el getElementsByClassName devolverá una colección de elementos, porque va a buscar a todas las clases dentro del objeto. Así que si sólo tiene 1 clase como que dentro de este objeto, usted tiene que conseguir el objeto 0th como:

var eleChild = eleCategory.getElementsByClassName("autoDropdown")[0]; 

guión Total:

Guión:

var eleCategory = document.getElementById("cmbCategory"); 
var eleChild = eleCategory.getElementsByClassName("autoDropdown"); 
alert(eleChild.length); 

HTML

<div id="cmbCategory"> 

    <div class="autoDropdown"></div> 
    <div class="autoDropdown"></div> 
</div> 

<div class="autoDropdown"></div> 

Answer 3

var eleChild = eleCategory.childNodes; 
for(i = 0 , j = eleChild.length; i < j ; i++){ 
    if(eleChild[ i ].className == "autodropdown"){ 
     YOUr_SCRIPT 
    } 
} 

Answer 4

Puede acceder a todo el árbol DOM, con esto:

document.childNodes[0].childNodes[0].childNodes[0] ... n[n] ... 

sólo tiene que buscar childNodes de childNodes. Y si no recuerdo mal, se puede:

var element = document.getElementById("myid"); 
var child = element.childNode[0] 

Answer 5

La forma moderna:

var element = document.querySelector('#Element'); 
var elementChildren = element.querySelectorAll('.Element-child'); 

elementChildren contendrá una matriz de todos los niños con una clase de Element-child dentro element.

Al utilizar la notación de paréntesis, podríamos acceder al enésimo niño de nuestra matriz, p.

var firstElementChild = elementChildren[0]; // zero-based