2010-04-16 5 views
32

He oído que el uso de el.innerText||el.textContent puede producir resultados poco fiables, y es por eso que siempre he insistido en usar la siguiente función en el pasado:innerText/textContent frente a la recuperación de cada nodo de texto

function getText(node) { 

    if (node.nodeType === 3) { 
     return node.data; 
    } 

    var txt = ''; 

    if (node = node.firstChild) do { 
     txt += getText(node); 
    } while (node = node.nextSibling); 

    return txt; 

} 

Esta función pasa por todos los nodos dentro de un elemento y recopila el texto de todos los nodos de texto, y el texto dentro de los descendientes:

Por ej.

<div id="x">foo <em>foo...</em> foo</div> 

Resultado:

getText(document.getElementById('x')); // => "foo foo... foo" 

estoy bastante seguro de que hay problemas con el uso innerText y textContent, pero no he sido capaz de encontrar una lista definitiva en cualquier lugar y estoy empezando a pregunto si es rumores.

¿Alguien puede ofrecer información sobre la posible falta de fiabilidad de textContent/innerText?

EDITAR: Encontrado esta gran respuesta por Kangax - 'innerText' works in IE, but not in Firefox

+0

¡Tan simple y tan útil! ¿Qué tal 'document.TEXT_NODE' en lugar de' 3'? ¿No es compatible con navegadores anteriores? – stackunderflow

Respuesta

33

Se trata de líneas de fondo y espacios en blanco - los navegadores son muy inconsistente en este sentido, especialmente en Internet Explorer. Hacer el recorrido es una forma segura de obtener resultados idénticos en todos los navegadores.

+0

Gracias John. Me sorprende que prácticamente no se mencione este problema en otro lugar de la red ... incluso QuirksMode no lo menciona. – James

+14

Traversal no garantiza los mismos resultados en todos los navegadores. Por ejemplo, en IE (a diferencia de otros navegadores), el contenido de un elemento '

Cuestiones relacionadas