«innerText» работает в IE, но не в Firefox

Question

У меня есть некоторый код JavaScript, который работает в IE, содержащий следующее:

myElement.innerText = "foo";

Однако, похоже, что свойство innerText не работает в Firefox. Есть ли какой-нибудь аналог Firefox? Или есть более общее свойство кросс-браузера, которое можно использовать?

Answer 1

Обновление : я написал в блоге подробное описание всех различий гораздо лучше.

---

Firefox использует стандарт W3C Node::textContent, но его поведение "немного" отличается от поведения проприетарного MSHTML innerText (также скопированного Opera некоторое время назад среди десятков других функций MSHTML).

Прежде всего, textContent представление пробелов отличается от innerText one. Во-вторых, что более важно, textContent включает в себя все содержимое тега SCRIPT , тогда как innerText - нет.

Просто чтобы сделать вещи более интересными, Opera - помимо реализации стандарта textContent - решила также добавить MSHTML innerText , но изменила его, чтобы он действовал как textContent - т.е. включая содержимое сценария (на самом деле * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, textContent and innerText "в Opera", по-видимому, дает идентичные результаты, вероятно, просто совмещая друг друга

textContent является частью Node интерфейса, тогда как innerText является частью HTMLElement. Это, например, означает, что вы можете «извлекать» textContent, но не innerText из текстовых узлов:

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

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

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

Наконец, Safari 2.x также имеет ошибочную реализацию innerText. В Safari innerText работает правильно, только если элемент ни скрытые (через style.display == "none"), ни осиротевшие из документа. В противном случае innerText приводит к пустой строке.

Я играл с textContent абстракцией (чтобы обойти эти недостатки), но она оказалась довольно сложной .

Лучше всего ставить , сначала определите свои точные требования и следуйте оттуда. Часто можно просто удалить теги с innerHTML элемента, вместо того, чтобы справляться со всеми возможными textContent / innerText отклонениями.

Другой возможностью, конечно же, является обход дерева DOM и рекурсивный сбор текстовых узлов.

Answer 2

Firefox использует W3C-совместимое textContent свойство.

Я думаю, Safari и Opera также поддерживают это свойство.

Answer 3

Если вам нужно только установить текстовый контент, а не получить его, вот тривиальная версия DOM, которую вы можете использовать в любом браузере; для него не требуется расширение IE innerText или свойство textContent 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));
}

Answer 4

jQuery предоставляет метод .text(), который можно использовать в любом браузере. Например:

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

Answer 5

Согласно ответу Prakash K, Firefox не поддерживает свойство innerText. Таким образом, вы можете просто проверить, поддерживает ли пользовательский агент это свойство, и действовать соответственно, как показано ниже:

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

Answer 6

Действительно простая строка Javascript может получить текст «без тегов» во всех основных браузерах ...

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

Answer 7

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

Edit (спасибо Mark Amery за комментарий ниже): Делайте это таким образом, только если вы вне разумных сомнений знаете, что ни один код не будет полагаться на проверку существования этих свойств, как (например) jQuery делает. Но если вы используете jQuery, вы, вероятно, просто используете функцию «text» и делаете $ ('# myElement'). Text ('foo'), как показывают некоторые другие ответы.

Answer 8

Обратите внимание, что свойство Element::innerText будет , а не содержать текст, который был скрыт стилем CSS "display:none" в Google Chrome (а также удалит содержимое, замаскированное другими Техника CSS (включая font-size: 0, color: прозрачный и некоторые другие подобные эффекты, которые делают текст не визуализируемым каким-либо видимым способом).

Также учитываются другие свойства CSS:

• Сначала анализируется стиль «display:» внутренних элементов, чтобы определить, разделяет ли он содержимое блока (например, «display: block», который является значением по умолчанию для элементов блока HTML во встроенной таблице стилей браузера, и чье поведение не был переопределен вашим собственным стилем CSS); в этом случае новая строка будет вставлена ​​в значение свойства innerText. Это не произойдет со свойством textContent.
• Также будут учитываться свойства CSS, которые генерируют встроенное содержимое: например, встроенный элемент <br \>, который генерирует встроенную новую строку, также будет генерировать новую строку в значении innerText.
• Стиль "display: inline" не вызывает новой строки ни в textContent, ни в innerText.
• Стиль "display: table" генерирует новые строки вокруг таблицы и между строками таблицы, но "display: table-cell" генерирует символ табуляции.
• Свойство position: absolute (используется с display: block или display: inline, это не имеет значения) также приведет к вставке разрыва строки.
• В некоторых браузерах также имеется разделение пробелами на один пробел

Но Element::textContent будет по-прежнему содержать ВСЕ содержимое внутренних текстовых элементов независимо от применяемого CSS, даже если они невидимы. И никакие дополнительные символы новой строки или пробелы не будут сгенерированы в textContent, который просто игнорирует все стили, а также структуру и встроенные / блочные или позиционированные типы внутренних элементов.

Операция копирования / вставки с использованием выделения мышью отбрасывает скрытый текст в формате обычного текста, который помещается в буфер обмена, поэтому он не будет содержать всего в textContent, но только то, что находится в innerText (после генерации пробелов / новой строки, как указано выше).

Тогда оба свойства поддерживаются в Google Chrome, но их содержание может отличаться. Старые браузеры по-прежнему включали в innetText все, что и сейчас содержит textContent (но их поведение в связи с генерацией пробелов / новых строк было нестабильным).

jQuery разрешит эти несоответствия между браузерами, используя метод ".text ()", добавленный к проанализированным элементам, которые он возвращает с помощью запроса $ (). Внутренне это решает трудности, просматривая HTML DOM, работая только с уровнем «узла». Так что он вернет что-то, похожее на стандартный textContent.

Предостережение заключается в том, что этот метод jQuery не будет вставлять лишние пробелы или разрывы строк, которые могут быть видны на экране из-за подэлементов (например, <br />) содержимого.

Если вы разрабатываете некоторые сценарии для обеспечения доступности, и ваша таблица стилей анализируется для неауристического рендеринга, например, плагинов, используемых для связи со средством чтения Брайля, этот инструмент должен использовать textContent, если он должен включать определенные знаки препинания, добавленные в интервалы, стилизованные под «display: none» и обычно включаемые в страницы (например, для надстрочных / подписных индексов), в противном случае innerText будет очень запутанным для читателя Брайля.

Тексты, скрытые с помощью хитростей CSS, теперь обычно игнорируются основными поисковыми системами (которые также будут анализировать CSS ваших HTML-страниц, а также будут игнорировать тексты, не имеющие контрастных цветов на фоне), используя анализатор HTML / CSS и свойство DOM "innerText" точно так же, как в современных визуальных браузерах (по крайней мере, это невидимое содержимое не будет проиндексировано, поэтому скрытый текст не может быть использован в качестве трюка для принудительного включения некоторых ключевых слов в страницу для проверки ее содержимого); но этот скрытый текст будет по-прежнему отображаться на странице результатов (если страница все еще была квалифицирована из индекса, который будет включен в результаты), используя свойство textContent вместо полного HTML для удаления дополнительных стилей и сценариев.

Если вы назначите какой-либо простой текст в любом из этих двух свойств, это перезапишет внутреннюю разметку и примененные к ней стили (только назначенный элемент сохранит свой тип, атрибуты и стили), поэтому оба свойства будут содержать тот же контент. Однако некоторые браузеры теперь больше не поддерживают запись в innerText и позволяют перезаписывать только свойство textContent (вы не можете вставлять разметку HTML при записи в эти свойства, поскольку специальные символы HTML будут правильно кодироваться с использованием числовых ссылок на символы, которые будут отображаться буквально. , если вы затем прочитали свойство innerHTML после присвоения innerText или textContent.

Answer 9

innerText был добавлен в Firefox и должен быть доступен в релизе FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Проект спецификации был написан и, как ожидается, будет включен в стандарт HTML в будущем: http://rocallahan.github.io/innerText-spec/, https://github.com/whatwg/html/issues/465

Обратите внимание, что в настоящее время реализации Firefox, Chrome и IE несовместимы. В дальнейшем мы можем ожидать, что Firefox, Chrome и Edge будут сходиться, в то время как старый IE остается несовместимым.

Смотри также: https://github.com/whatwg/compat/issues/5

Answer 10

Как и в 2016 году из Firefox v45, innerText работает на Firefox, взгляните на его поддержку: http://caniuse.com/#search=innerText

Если вы хотите, чтобы он работал в предыдущих версиях Firefox, вы можете использовать textContent, который имеет лучшую поддержку в Firefox, но хуже в старых версиях IE : http://caniuse.com/#search=textContent