20

このブログ投稿は、レイアウトのスラッシングを回避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、スラッシュを確認します。

画像

誰かがこの動作を説明できますか? レイアウトのスラッシングを回避し、要素のテキストを標準ベースの方法で変更するにはどうすればよいですか?

4

2 に答える 2

12

問題：

あなたは正しいです！あなたが観察したように。設定textContentするとスラッシングが発生します。

DOM 仕様の内容は次のとおりです。

DOM Level 3 で導入された DOMString 型のtextContent

この属性は、このノードとその子孫のテキスト コンテンツを返します。null として定義されている場合、設定しても効果はありません。設定時に、このノードが持つ可能性のある子はすべて削除され、新しい文字列が空または null でない場合は、この属性が設定されている文字列を含む単一の Text ノードに置き換えられます。

修正

textContentスラッシングしない方法は、要素のテキスト ノードを取得し、 orを使用する代わりにそれらを変更することですinnerText(これは非標準です)。

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

これが実用的なフィドルです

もちろん、実際のテキストが変更される場合は、表示内容を更新するためにペイントを実行する必要があります。

プロフィール

于 2013-06-19T23:32:56.447 に答える