¿Cómo obtener el elemento hijo por nombre de clase?

Estoy tratando de obtener el span secundario que tiene una clase = 4. Aquí hay un elemento de ejemplo:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

Las herramientas que tengo disponibles son JS y YUI2. Puedo hacer algo como esto:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

Estos no funcionan en IE. Recibo un error de que el objeto (doc) no admite este método o propiedad (getElementsByClassName). He probado algunos ejemplos de implementaciones en varios navegadores de getElementsByClassName, pero no pude hacer que funcionen y todavía recibí ese error.

Creo que lo que necesito es un getElementsByClassName de navegador cruzado o necesito usar doc.getElementsByTagName ('span') y recorrer hasta encontrar la clase 4. Sin embargo, no estoy seguro de cómo hacerlo.

Use doc.childNodespara iterar a través de cada uno spany luego filtre el que sea classNameigual a 4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

Utilice querySelector y querySelectorAll

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9 y superior

;)

La respuesta aceptada solo verifica a los niños inmediatos. Muchas veces estamos buscando descendientes con ese nombre de clase.

Además, a veces queremos cualquier hijo que contenga un className.

Por ejemplo: <div class="img square"></div>debe coincidir con una búsqueda en className "img", aunque sea exactamente className no es "img".

Aquí hay una solución para ambos problemas:

Encuentra la primera instancia de un elemento descendiente con la clase className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

Use element.querySelector (). Supongamos: 'myElement' es el elemento padre que ya tiene. 'sonClassName' es la clase del niño que está buscando.

let child = myElement.querySelector('.sonClassName');

Para obtener más información, visite: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Tu podrías intentar:

notes = doc.querySelectorAll('.4');

o

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

Para mí parece que quieres el cuarto tramo. Si es así, puedes hacer esto:

document.getElementById("test").childNodes[3]

o

document.getElementById("test").getElementsByTagName("span")[3]

Este último garantiza que no haya ningún nodo oculto que pueda estropearlo.

Pero tenga en cuenta que los navegadores antiguos no son compatibles getElementsByClassName.

Entonces puedes hacer

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

Parece que funciona, pero tenga en cuenta que una clase HTML

• Debe comenzar con una letra: AZ o az
• Puede ir seguido de letras (A-Za-z), dígitos (0-9), guiones ("-") y guiones bajos ("_")

Use el nombre de la identificación con getElementById, sin #signo antes. Luego puede spanusar los nodos secundarios getElementsByTagNamey recorrerlos para encontrar el que tenga la clase correcta:

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

Manifestación: http://jsfiddle.net/Guffa/xB62U/

En mi opinión, cada vez que puedas, debes usar Array y sus métodos. Son mucho, mucho más rápidos que hacer un bucle en todo el DOM / contenedor, o empujar cosas en una matriz vacía. La mayoría de las soluciones presentadas aquí puede llamar a Naive como se describe aquí (gran artículo por cierto):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

Mi solución : (vista previa en vivo en Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

La forma en que haré esto usando jquery es algo como esto ...

var targechild = $ ("# test"). children (). find ("span.four");

Aquí hay una solución recursiva relativamente simple. Creo que una búsqueda de amplitud es apropiada aquí. Esto devolverá el primer elemento que coincida con la clase que se encuentra.

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

Puede buscar la clase principal agregando la siguiente línea. Si tuviera una identificación, sería más fácil con getElementById. Sin embargo,

var parentNode = document.getElementsByClassName("progress__container")[0];

Luego puede usar querySelectorAllen el padre <div>para obtener todos los divs coincidentes con la clase.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAllbuscará todos divcon la clase deprogress__marker

Solución moderna

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

documentación

Actualización de junio de 2018 a ES6

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

YUI2 tiene una implementación de navegador cruzado degetElementsByClassName .

Así es como lo hice usando los selectores YUI. Gracias a la sugerencia de Hank Gay.

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

donde four = classname, span = el tipo de elemento / nombre de etiqueta, y test = la identificación principal

Usar YAHOO.util.Dom.getElementsByClassName()desde aquí .