'innerText' funciona no IE, mas não no Firefox

Eu tenho algum código JavaScript que funciona no IE contendo o seguinte:

myElement.innerText = "foo";

No entanto, parece que a propriedade 'innerText' não funciona no Firefox. Existe algum equivalente do Firefox? Ou existe uma propriedade entre navegadores mais genérica que pode ser usada?

O Firefox usa a propriedade textContent compatível com W3C .

Eu acho que o Safari e o Opera também suportam essa propriedade.

Atualização : escrevi uma postagem no blog detalhando todas as diferenças muito melhor.

O Firefox usa o padrão W3C Node::textContent, mas seu comportamento difere "levemente" do do proprietário do MSHTML innerText(copiado pelo Opera também, há algum tempo, entre dezenas de outros recursos do MSHTML).

Primeiro de tudo, a textContentrepresentação de espaço em branco é diferente de innerTextum. Segundo, e mais importante, textContent inclui todo o conteúdo da tag SCRIPT , enquanto o innerText não.

Apenas para tornar as coisas mais divertidas, o Opera - além de implementar o padrão textContent- decidiu também adicionar MSHTMLs, innerText mas mudou para atuar comotextContent - isto é, incluindo o conteúdo do SCRIPT (de fato, textContente innerTextno Opera parecem produzir resultados idênticos, provavelmente sendo apenas um alias para o outro) .

textContentfaz parte da Nodeinterface, ao passo que innerTextfaz parte HTMLElement. Isso, por exemplo, significa que você pode "recuperar", textContentmas não innerTextdos nós de texto:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Por fim, o Safari 2.x também possui innerTextimplementação de bugs . No Safari, innerTextfunciona corretamente apenas se um elemento não estiver oculto (via style.display == "none") ou órfão do documento. Caso contrário, innerTextresulta em uma sequência vazia.

Eu estava brincando com textContentabstração (para contornar essas deficiências), mas acabou sendo bastante complexo .

Sua melhor aposta é definir primeiro os requisitos exatos e seguir a partir daí. Muitas vezes, é possível simplesmente remover as tags innerHTMLde um elemento, em vez de lidar com todos os possíveis textContent/ innerTextdesvios.

Outra possibilidade, é claro, é percorrer a árvore DOM e coletar nós de texto recursivamente.

Se você precisa apenas definir o conteúdo do texto e não recuperar, aqui está uma versão trivial do DOM que você pode usar em qualquer navegador; ele não requer a extensão IE innerText ou a propriedade textContent do DOM Nível 3 principal.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

O jQuery fornece um .text()método que pode ser usado em qualquer navegador. Por exemplo:

$('#myElement').text("Foo");

De acordo com a resposta de Prakash K, o Firefox não suporta a propriedade innerText. Portanto, você pode simplesmente testar se o agente do usuário suporta essa propriedade e proceder conforme a seguir:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

Uma linha realmente simples de Javascript pode obter o texto "não taggy" em todos os principais navegadores ...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

Observe que a Element::innerTextpropriedade não conterá o texto oculto pelo estilo CSS " display:none" no Google Chrome (também eliminará o conteúdo que foi mascarado por outras técnicas de CSS (incluindo tamanho da fonte: 0, cor: transparente e alguns outros efeitos semelhantes que fazem com que o texto não seja renderizado de maneira visível).

Outras propriedades CSS também são consideradas:

• Primeiro, o estilo "display:" dos elementos internos é analisado para determinar se ele delimita o conteúdo de um bloco (como "display: block", que é o padrão dos elementos de bloco HTML na folha de estilo interna do navegador e cujo comportamento não foi substituído por seu próprio estilo CSS); Nesse caso, uma nova linha será inserida no valor da propriedade innerText. Isso não acontecerá com a propriedade textContent.
• As propriedades CSS que geram conteúdo embutido também serão consideradas: por exemplo, o elemento inline <br \>que gera uma nova linha embutida também gerará uma nova linha no valor de innerText.
• O estilo "display: inline" não causa nova linha em textContent ou innerText.
• O estilo "display: table" gera novas linhas ao redor da tabela e entre as linhas da tabela, mas "display: table-cell" gera um caractere de tabulação.
• A propriedade "position: absolute" (usada com display: block ou display: inline, não importa) também fará com que uma quebra de linha seja inserida.
• Alguns navegadores também incluem uma única separação de espaço entre extensões

Mas Element::textContentainda conterá TODO o conteúdo dos elementos internos do texto independentemente do CSS aplicado, mesmo que sejam invisíveis. E não serão geradas novas linhas ou espaços em branco extras no textContent, que apenas ignora todos os estilos e a estrutura e os tipos de elementos internos embutidos / bloqueados ou posicionados.

Uma operação de copiar / colar usando a seleção do mouse descartará o texto oculto no formato de texto sem formatação colocado na área de transferência, para que não contenha tudo o textContentque estiver dentro, mas apenas o que está dentro innerText(após a geração de espaços em branco / nova linha, como acima) .

Ambas as propriedades são suportadas no Google Chrome, mas seu conteúdo pode ser diferente. Os navegadores mais antigos ainda incluídos no innetText, como tudo o que o conteúdo do conteúdo agora contém (mas o comportamento deles em relação à geração de espaços em branco / novas linhas era inconsistente).

O jQuery resolverá essas inconsistências entre navegadores usando o método ".text ()" adicionado aos elementos analisados ​​que ele retorna por meio de uma consulta $ (). Internamente, ele resolve as dificuldades examinando o HTML DOM, trabalhando apenas com o nível "nó". Portanto, ele retornará algo parecido com o textContent padrão.

A ressalva é que esse método jQuery não inserirá espaços extras ou quebras de linha que possam ser visíveis na tela causadas por subelementos (como <br />) do conteúdo.

Se você projetar alguns scripts para acessibilidade e sua folha de estilo for analisada para renderização não auditiva, como plug-ins usados ​​para se comunicar com um leitor de Braille, essa ferramenta deverá usar o textContent se precisar incluir os sinais de pontuação específicos adicionados em vãos estilizados com "display: none" e que geralmente são incluídos nas páginas (por exemplo, sobrescritos / subscritos); caso contrário, o innerText será muito confuso para o leitor de Braille.

Os textos ocultos pelos truques de CSS agora são normalmente ignorados pelos principais mecanismos de pesquisa (que também analisam o CSS de suas páginas HTML e também ignoram textos que não estão com cores contrastantes no fundo) usando um analisador de HTML / CSS e a propriedade DOM "innerText" exatamente como nos navegadores visuais modernos (pelo menos esse conteúdo invisível não será indexado, portanto, o texto oculto não pode ser usado como um truque para forçar a inclusão de algumas palavras-chave na página para verificar seu conteúdo); mas esse texto oculto ainda será exibido na página de resultados (se a página ainda estiver qualificada no índice para ser incluída nos resultados), usando a propriedade "textContent" em vez do HTML completo para remover os estilos e scripts extras.

Se você atribuir texto sem formatação em qualquer uma dessas duas propriedades, isso substituirá a marcação interna e os estilos aplicados a ela (apenas o elemento atribuído manterá seu tipo, atributos e estilos), portanto, ambas as propriedades conterão o mesmo conteúdo . No entanto, alguns navegadores agora não respeitam mais a gravação em innerText e permitem sobrescrever a propriedade textContent (você não pode inserir a marcação HTML ao gravar nessas propriedades, pois os caracteres especiais HTML serão codificados corretamente usando referências de caracteres numéricos para aparecer literalmente , se você ler a innerHTMLpropriedade após a atribuição de innerTextou textContent.

myElement.innerText = myElement.textContent = "foo";

Editar (obrigado a Mark Amery pelo comentário abaixo): Faça isso desta maneira apenas se souber, sem sombra de dúvida, que nenhum código dependerá da verificação da existência dessas propriedades, como (por exemplo) o jQuery . Mas se você estiver usando jQuery, provavelmente usaria a função "text" e executaria $ ('# myElement'). Text ('foo'), como mostram outras respostas.

innerTextfoi adicionado ao Firefox e deve estar disponível na versão FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Um rascunho de especificação foi escrito e espera-se que seja incorporado ao padrão de vida em HTML no futuro: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Observe que atualmente as implementações do Firefox, Chrome e IE são todas incompatíveis. No futuro, provavelmente podemos esperar que o Firefox, Chrome e Edge convergam enquanto o IE antigo permanece incompatível.

Veja também: https://github.com/whatwg/compat/issues/5

Que tal algo assim?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** Eu precisava fazer a minha maiúscula.

Como em 2016, no Firefox v45, innerTextfunciona no firefox, dê uma olhada no suporte: http://caniuse.com/#search=innerText

Se você deseja que ele funcione nas versões anteriores do Firefox, você pode usá-lo textContent, que tem melhor suporte no Firefox, mas pior nas versões mais antigas do IE : http://caniuse.com/#search=textContent

Esta tem sido a minha experiência com innerText, textContent, innerHTML, e valor:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

ie = internet explorer, ff = firefox, ch = google chrome. nota 1: ff funciona até que o valor seja excluído com backspace - veja nota de Ray Vega acima. nota 2: funciona um pouco no chrome - após a atualização, ele permanece inalterado e você clica para fora e clica novamente no campo e o valor aparece. O melhor do lote é elem.value = changeVal; que não comentei acima.

Apenas republicando comentários sob a postagem original. innerHTML funciona em todos os navegadores. Obrigado stefita.

myElement.innerHTML = "foo";

encontrou isso aqui:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

Também é possível emular o innerTextcomportamento em outros navegadores:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }