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

obtener id de un elemento javascript

Question

Estoy tratando de obtener el intervalo hijo 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 intentado algunos ejemplos de implementaciones en varios navegadores de getElementsByClassName, pero no pude hacer que funcionen y aún tengo ese error.

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

Answer 1

A mi me 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 nodos ocultos que puedan estropearlo.

Answer 2

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;
        }    
    }

Answer 3

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;
}

Answer 4

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 cuatro = nombre de clase, rango = el tipo de elemento / nombre de etiqueta, y prueba = el ID principal.

Answer 5

En mi opinión, cada vez que pueda, debe usar Array y sus métodos. Son mucho, mucho más rápidos que los bucles en todo el DOM / wrapper, o empujando cosas en una matriz vacía. La mayoría de las soluciones presentadas aquí se pueden llamar ingenuas 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
})

Answer 6

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

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

Answer 7

La respuesta aceptada solo verifica niños inmediatos. Muchas veces buscamos descendientes con ese nombre de clase.

Además, a veces queremos que cualquier niño que contenga un className.

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

Aquí hay una solución para estos dos 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;
    }

Answer 8

Pero tenga en cuenta que los navegadores antiguos no admiten 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 ten 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 ("_")

Answer 9

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'') {
    }
}

Answer 10

Use doc.childNodes para iterar a través de cada span , y luego filtre uno cuyo nombre de className igual 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;
    }        
}

Al aire libre

Answer 11

Use querySelector y querySelectorAll

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

IE9 y superior

;)

Answer 12

Utilice YAHOO.util.Dom.getElementsByClassName() desde here .

Answer 13

Utilice el nombre del ID con el getElementById , no hay un # signo delante de él. Luego, puede obtener los nodos hijos de span utilizando getElementsByTagName y 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);
}

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

Answer 14

YUI2 tiene una implementación en varios navegadores de getElementsByClassName .