Почему установка textContent вызывает разметку макета?

Этот пост в блоге предполагает, что textContent предпочтительнее innerText, чтобы избежать разметки макета. Но он ориентирован на извлечение текста элемента; для установки текста элемента обратное выглядит как истина - по крайней мере, в следующем примере.

В этом примере используется innerText и не производится разбиение макета:

<style>
    #test {
        background-color: blue;
        float: right;
        width: 100px;
        height: 100%;
    }
</style>
Test test test
<div id="test"></div>
<script>
    setInterval(function() {
        document.querySelector('#test').innerText = 'innerText';
    }, 100);
</script>

Но замените innerText на textContent и посмотрите, как он трэш:

Может кто-нибудь объяснить это поведение? Что я могу сделать, чтобы избежать разметки макета и по-прежнему менять текст элемента на основе стандартов?

Ответ 1

Проблема:

Вы правы! Как и вы. Установка textContent вызывает изнашивание.

Вот что спецификация DOM должна сказать:

textContent типа DOMString, введенного в DOM Level 3

Этот атрибут возвращает текстовое содержимое этого node и его потомков. Когда он определен как null, установка его не влияет. При установке любые возможные дочерние элементы, которые могут быть удалены этим node, и если новая строка не является пустой или пустой, заменяется одним текстом node, содержащим строку, для которой установлен этот атрибут.

Исправление

Невозмутимым способом было бы получить текстовые узлы элемента и изменить их вместо использования textContent или innerText (что является нестандартным).

var test = document.getElementById("test");
var a = document.createTextNode("");
test.appendChild(a);
setInterval(function(){
    a.nodeValue = "Test test test";
},100);

Вот рабочая скрипка

Конечно, если фактический текст изменится, потребуется краска, чтобы обновить то, что вы видите.

Ответ 2

В дополнение к Benjamin answer, я заметил, что когда значение nodeValue или innerText отличается от предыдущего, весь макет документа разбит также, как вы можете видеть здесь: http://jsfiddle.net/5N7Rr/15/

(Полный экран, откроется в новой вкладке)

Браузер уничтожает весь макет, потому что он не знает размер элемента, поэтому трюк, чтобы избежать полного уничтожения документа, заключается в установке фиксированных height и width И установите overflow в hidden (Важный). Таким образом, вы сообщаете браузеру, что независимо от содержимого элемента, он никогда не покинет границы элементов.

Fiddle: http://jsfiddle.net/5N7Rr/16/

И доказательство (полный экран снова). Обратите внимание, что обновление макета влияет только на элемент: