javascript - 'innerText' funcționează în IE, dar nu în Firefox

Am niște cod JavaScript care funcționează în IE și conține următoarele:

myElement.innerText = "foo";

Totuși, se pare că proprietatea 'innerText' nu funcționează în Firefox. Există un echivalent pentru Firefox? Sau există o proprietate mai generică, compatibilă cu mai multe browsere, care poate fi utilizată?

Răspuns #1

Actualizare: Am scris o postare pe blog în care detaliam mult mai bine toate diferențele.

Firefox folosește standardul W3C Node::textContent, dar comportamentul său diferă „ușor” de cel al innerText-ului proprietar MSHTML (copiat și de Opera, cu ceva timp în urmă, printre zeci de alte funcționalități MSHTML).

În primul rând, reprezentarea spațiilor albe în textContent este diferită de cea din innerText. În al doilea rând, și mai important, textContent include tot conținutul etichetelor SCRIPT, în timp ce innerText nu o face.

Doar pentru a face lucrurile mai interesante, Opera - pe lângă implementarea standardului textContent - a decis să mai adauge și innerText de la MSHTML dar l-a schimbat să funcționeze ca textContent - adică să includă conținutul SCRIPT (de fapt, textContent și innerText în Opera par să producă rezultate identice, probabil fiind doar aliasuri unul pentru celălalt).

textContent face parte din interfața Node, în timp ce innerText face parte din HTMLElement. Aceasta, de exemplu, înseamnă că poți "recupera" textConținut, dar nu și innerText din nodurile de text:

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

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

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

În cele din urmă, Safari 2.x are de asemenea o implementare defectuoasă a innerText. În Safari, innerText funcționează corect doar dacă un element nu este nici ascuns (prin style.display == "none"), nici părăsit din document. Altfel, innerText returnează un șir gol.

Mă jucam cu abstracția textContent (pentru a ocoli aceste deficiențe), dar s-a dovedit a fi destul de complexă.

Cea mai bună opțiune este să definești mai întâi cerințele exacte și să continui de acolo. Este adesea posibil să elimini pur și simplu etichetele din innerHTML ale unui element, mai degrabă decât să tratezi toate posibilele deviații ale textContent/innerText.

O altă posibilitate, desigur, este să parcurgi arborele DOM și să colectezi nodurile de text recursiv.

Răspunsul #2

Firefox folosește proprietatea textContent compatibilă cu W3C.

Aș ghici că Safari și Opera suportă de asemenea această proprietate.

Răspunsul #3

Dacă trebuie doar să setezi conținutul textului și nu să-l preiei, iată o versiune simplă DOM pe care o poți folosi în orice browser; nu necesită nici extensia innerText a IE, nici proprietatea textContent din DOM Level 3 Core.

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

Răspuns #4

jQuery oferă o metodă .text() care poate fi utilizată în orice browser. De exemplu:

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

Răspunsul #5

Conform răspunsului lui Prakash K, Firefox nu suportă proprietatea innerText. Așadar, puteți pur și simplu să testați dacă agentul utilizator suportă această proprietate și să procedați în consecință, așa cum urmează:

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

Răspuns #6

O linie foarte simplă de Javascript poate obține textul „non-taggy” în toate browserele principale...

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