getElementsByName en IE7

Question

Tengo algo de código haciendo esto:

var changes = document.getElementsByName(from); 
for (var c=0; c<changes.length; c++) { 
    var ch = changes[c]; 
    var current = new String(ch.innerHTML); 
    etc. 
} 

Esto funciona bien en FF y Chrome, pero no en IE7. Presumiblemente porque getElementsByName no funciona en IE. ¿Cuál es la mejor solución?

Answer 1

En caso de que no sabe por qué esto no está funcionando en el IE, aquí es the MSDN documentation on that function:

Cuando se utiliza el método getElementsByName, todos los elementos del documento que tiene el atributo de nombre especificado o ID el valor del atributo se devuelve.

Los elementos que admiten tanto el atributo NAME como el atributo ID se incluyen en la colección devuelta por el método getElementsByName, pero los elementos con un NAME expando no se incluyen en la colección; por lo tanto, este método no se puede usar para recuperar etiquetas personalizadas por nombre.

Firefox permite getElementsByName() recuperar elementos que usan un NAME expando, por lo que funciona. Si eso es algo bueno o no, puede estar en debate, pero esa es la realidad.

Por lo tanto, una opción es utilizar el método DOM getAttribute() para solicitar el atributo NAME y luego probar el valor para ver si es lo que desea y, de ser así, agregarlo a una matriz. Esto requeriría, sin embargo, iterar sobre todos los nodos en la página o al menos dentro de una subsección, que no sería la más eficiente. Puede restringir esa lista de antemano usando algo como getElementsByTagName() quizás.

Otra forma de hacerlo, si tiene el control del código HTML de la página, es otorgando a todos los elementos de interés un Id que varía solo por número, p. Ej.:

<div id="Change0">...</div> 
<div id="Change1">...</div> 
<div id="Change2">...</div> 
<div id="Change3">...</div> 

Y luego tener JavaScript así:

// assumes consecutive numbering, starting at 0 
function getElementsByModifiedId(baseIdentifier) { 
    var allWantedElements = []; 
    var idMod = 0; 
    while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more 
     allWantedElements.push(document.getElementById(baseIdentifier + idMod++)); 
    } 
    return allWantedElements; 
} 

// call it like so: 
var changes = getElementsByModifiedId("Change"); 

Eso es un truco, por supuesto, pero sería hacer el trabajo que necesita y no sea demasiado ineficiente en comparación con algunos otros cortes.

Si está utilizando un framework/kit de herramientas de JavaScript de algún tipo, sus opciones son mucho mejores, pero no tengo tiempo para entrar en esos detalles a menos que indique que está utilizando uno. Personalmente, no sé cómo vive la gente sin uno, ahorran tanto tiempo, esfuerzo y frustración que no puede pagar y no para usar uno.

Answer 2

Hay un par de problemas:

1. IE es de hecho confuso id="" con name=""
2. name="" no está permitido en <span>

Para solucionar, sugiero:

1. Cambiar todo name="" a class=""
2. cambiar el código de la siguiente manera:

-

var changes = document.getElementById('text').getElementsByTagName('span'); 
for (var c=0; c<changes.length; c++) { 
var ch = changes[c]; 

if (ch.className != from) 
continue; 

var current = new String(ch.innerHTML); 

Answer 3

getElementsByName es compatible con IE, pero hay bichos. En particular, devuelve elementos cuya 'id' coincide con el valor dado, así como con 'nombre'. No puedo decir si ese es el problema que tiene sin un poco más de contexto, código y mensajes de error reales.

En general, getElementsByName probablemente es mejor evitarlo, porque el atributo 'nombre' en HTML tiene varios propósitos superpuestos que pueden confundir. Usar getElementById es mucho más confiable. Cuando trabaje específicamente con campos de formulario, puede usar form.elements [name] de manera más confiable para recuperar los campos que está buscando.

Answer 4

No es muy común encontrar elementos usando la propiedad NAME. Yo recomendaría cambiar a la propiedad de ID.

Sin embargo, puede encontrar los elementos con un nombre específico usando jQuery:

$("*[name='whatevernameYouWant']"); 

Esto devolverá todos los elementos con el nombre dado.

Answer 5

Sólo otro error en el IE DOM:

Bug 1: http://webbugtrack.blogspot.com/2007/08/bug-411-getelementsbyname-doesnt-work.html

Bug 2: http://webbugtrack.blogspot.com/2008/04/bug-403-another-getelementsbyname-bugs.html

Answer 6

que he tenido éxito en el uso de un envoltorio para devolver una matriz de los elementos. Funciona en IE 6 y 7 también. Tenga en cuenta que no es 100% exactamente lo mismo que document.getElementsByName, ya que no es un NodeList. Pero para lo que necesito, que es ejecutar un bucle for en una serie de elementos para hacer cosas simples como configurar .disabled = true, funciona bastante bien.

Aunque esta función todavía usa getElementsByName, funciona si se usa de esta manera. Ver por ti mismo.

function getElementsByNameWrapper(name) { 
    a = new Array(); 

    for (var i = 0; i < document.getElementsByName(name).length; ++i) { 
    a.push(document.getElementsByName(name)[i]); 
    } 

    return a; 
} 

Answer 7

Solución

   var listOfElements = document.getElementsByName('aName'); // Replace aName with the name you're looking for 
      // IE hack, because it doesn't properly support getElementsByName 
      if (listOfElements.length == 0) { // If IE, which hasn't returned any elements 
       var listOfElements = []; 
       var spanList = document.getElementsByTagName('*'); // If all the elements are the same type of tag, enter it here (e.g.: SPAN) 
       for(var i = 0; i < spanList.length; i++) { 
        if(spanList[i].getAttribute('name') == 'aName') { 
         listOfElements.push(spanList[i]); 
        } 
       } 
      }