Leer elementos HTML personalizados mediante JavaScript no funciona en IE

Question

Tengo algunos elementos personalizados en mi página HTML. Para hacer algunas modificaciones en él, escribí un JavaScript.

Tiene algunos elementos personalizados en él. Estos elementos se agregan intencionalmente.

Muestra Fuente:

<div>  
     <br /> 
    <a name="IDATLQHE"></a> 
    <h2 class="subhead" xmlns=""> 
    <dev> 
     <dd> 
      <span>abcd</span> 
     </dd> 

     <rr> 
      <span> 
        <a title="google" href="http://google.com">google.com</a> 
      </span> 
     </rr>      
    </dev> 
    </h2>  
</div> 

salida necesaria:

quiero reemplazar el contenido del elemento <a> en el elemento <rr> con el contenido del elemento de <dd>. (Los elementos <rr>, <dd> y <dev> son los elementos personalizados.)

JavaScript escrito:

<script type="text/javascript"> 
var devs = document.getElementsByTagName('dev'); 
for(var i = 0, len = devs.length; i < len; i++) 
{ 
    var dev = devs[i], 
     h2 = dev.getElementsByTagName('rr'), 
     h3 = dev.getElementsByTagName('dd'); 
    if(h2.length === 1) 
    { 
     var aa= h2[0], 
     aaa=aa.getElementsByTagName('a'); 
     if(h2.length === 1 && h3.length === 1) 
     { 
      aaa[0].innerHTML = h3[0].innerHTML; 
      h3[0].innerHTML=null; 
     } 
    } 
} 
</script> 

Esta secuencia de comandos funciona bien en Firefox, pero no en IE.

Editar:

Después de añadir los elementos HTML y añadiendo diferentes atributos de clase.

<div>  
      <br /> 
     <a name="IDATLQHE"></a> 
     <h2 class="subhead" xmlns=""> 
     <div class="dummy"> 
      <div class="dummyy"> 
       <span>abcd</span> 
      </div> 

      <div class="dummyyy"> 
       <span> 
         <a title="google" href="http://google.com">google.com</a> 
       </span> 
      </div>     
     </div> 
     </h2>  
    </div> 

Modified Java Script:

<script type="text/javascript"> 
    var divs = document.getElementsByClassName('dummy'); 
    for(var i = 0, len = divs.length; i < len; i++) 
    { 
     var div = divs[i], 
     h2 = div.getElementsByClassName('dummyyy'), 
     h3 = div.getElementsByClassName('dummyy'); 
     if(h2.length === 1) 
     { 
      var aa= h2[0], 
      aaa=aa.getElementsByTagName('a'); 
      if(h2.length === 1 && h3.length === 1) 
      { 
       aaa[0].innerHTML = h3[0].innerHTML; 
       h3[0].innerHTML=null; 
      } 
     } 
    } 

Todavía estoy enfrentando el mismo problema. No funciona para IE (Versión 8).

¿Alguien puede sugerir los cambios que se deben hacer para que funcione tanto en IE como en Firefox?

Answer 1

Mientras jugaba juegos de ordenador en la noche anterior se me ocurrió la idea eso podría resolver tu problema. Cuando lo probé por mi cuenta, tengo la teoría de que las etiquetas html no válidas no se crearán como un objeto html, por lo que no se puede acceder a aquellas con funciones del DOM. Así que cambié las etiquetas personalizadas -inclusive la etiqueta dd aunque es una etiqueta html válida- en etiquetas div y agregué una clase dummy css como identificador. El siguiente cambio que hice fue agregar la función getElementsByClass() método. Debido a que document.getElementsByClassName() no existe para IE8 y anteriores, recordé que había encontrado una función que hace lo mismo -note los diferentes en llamar a la función- there. El resultado de estos cambios es el siguiente:

<script type="text/javascript"> 
    function test() 
    { 
     var devs = getElementsByClass('dev'); 
     for(var i = 0, len = devs.length; i < len; i++) 
     { 
      var h2 = getElementsByClass('rr', devs[i]); 
      var h3 = getElementsByClass('dd', devs[i]); 
      if(h2.length === 1) 
      { 
       aaa=h2[0].getElementsByTagName('a'); 
       if(h2.length === 1 && h3.length === 1) 
       { 
        aaa[0].innerHTML = h3[0].innerHTML; 
        h3[0].innerHTML = ""; 
       } 
      } 
     } 
    } 

    function getElementsByClass(searchClass, domNode, tagName) { 
     if (domNode == null) domNode = document; 
     if (tagName == null) tagName = '*'; 
     var el = new Array(); 
     var tags = domNode.getElementsByTagName(tagName); 
     var tcl = " "+searchClass+" "; 
     for(i=0,j=0; i<tags.length; i++) { 
      var test = " " + tags[i].className + " "; 
      if (test.indexOf(tcl) != -1) 
       el[j++] = tags[i]; 
     } 
     return el; 
    } 
    </script> 

Y parece que hace el trabajo ...

Answer 2

lo probé en jsFiddle y esta versión da el mismo resultado para mí en FF, así como en IE9: http://jsfiddle.net/qWP2t/1/

No estoy seguro de si este es el comportamiento deseado toda vez que no se especificó claramente qué está mal con el script en IE. Sin embargo, en términos generales, no introduciría elementos personalizados, sino que más bien confiaría en los especificados por HTML (y HTML5) y, en el caso de usar nombres de clases, añadiría más semántica si fuera necesario.

Answer 3

Reemplace <rr> y <dev> con elementos HTML (posiblemente con un atributo de clase).

HTML personalizado es HTML no válido. Basura en → Basura fuera.

Answer 4

Creo que he detectado dónde saliste mal.

Tengo algunos elementos personalizados en mi página HTML.

Allí. Ahí es donde te equivocaste.

Es una broma. No tengo mucha experiencia con elementos personalizados, pero sé que IE no funciona muy bien con etiquetas desconocidas, p. las nuevas etiquetas en HTML5 inicialmente no se pueden diseñar en IE.

Para solucionar este problema, puede solucionarlo creando una instancia de la etiqueta en JavaScript antes de intentar darle un estilo.Quizás esto arreglaría tu problema también. Por lo tanto, la parte superior de la secuencia de comandos se vería así:

<script type="text/javascript"> 
    document.createElement('dd'); 
    document.createElement('dev'); 
    document.createElement('rr'); 

    var devs = document.getElementsByTagName('dev'); 

(que en realidad no sé si eso funcionaría sin embargo.)

Answer 5

IE (incluso incluyendo IE9) no reconoce los elementos personalizados. Sí, funciona el truco document.createElement(), si eso es factible en su escenario.

Para los datos sobre cómo Microsoft querría hacer esto, echar un vistazo a esto:

http://ajaxian.com/archives/adding-custom-tags-to-internet-explorer-the-official-way