【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する

JavaScript/DOMの『ノードのtextContentプロパティ』について解説します。

検証環境

JavaScript -

macOS

14.1

textContentプロパティ

textContentプロパティはノードのテキスト値を表します。

このプロパティ値を変更した際の要素ノード、テキストノード、コメントノード、属性ノードの動作の違いについて確認します。

要素ノード

要素ノードのtextContentプロパティ値を変更すると、ノード内が更新値で置き変わります。

sample.html

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    <p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
</div>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    ___ih_hl_start
    node.textContent = "DOMについて";
    ___ih_hl_end
    
    console.log(node);
</script>

プレビュー

Console

<h1 id="title">DOMについて</h1>

この変更はブラウザのレンダリングテキストにも反映されます。

ただし、要素ノード含む全てのノードが置き変わってしまう点に注意が必要です。

例えば、上記サンプルのdiv要素（id属性がbox）の値を更新すると、内部のコメントノードやp要素ノードが消えてしまいます。

sample.html

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    <p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
</div>

<script type="text/javascript">
    ___ih_diff_start
-    let node = document.getElementById("title");
+    let node = document.getElementById("box");
    ___ih_diff_end
    
    node.textContent = "DOMについて";
    
    console.log(node);
</script>

プレビュー

Console

<div id="box">DOMについて</div>

テキストノード

テキストノードのtextContentプロパティ値を変更すると、ノード自体のテキストが変更されます。

sample.html

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let node = document.getElementById("box");
    
    console.log(node.childNodes);
    
    ___ih_hl_start
    node.childNodes[4].textContent = "DOMについて";
    ___ih_hl_end
    
    console.log(node.childNodes[4]);
</script>

プレビュー

Console

NodeList(5) [text, comment, text, p, text]
"DOMについて"

この変更はブラウザのレンダリングテキストにも反映されます。

コメントノード

コメントノードのtextContentプロパティ値を変更すると、コメントテキストが変更されます。

sample.html

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
</div>

<script type="text/javascript">
    let node = document.getElementById("box");
    
    console.log(node.childNodes);
    
    ___ih_hl_start
    node.childNodes[1].textContent = "DOMについて";
    ___ih_hl_end
    
    console.log(node.childNodes[1]);
</script>

プレビュー

Console

NodeList(5) [text, comment, text, p, text]
<!--DOMについて-->

コメントはブラウザに表示されませんが、ブラウザの開発ツール（検証ツール等）でHTMLドキュメントを確認すると、コメントのテキストが変わっていることが確認できます。

属性ノード

属性ノードのtextContentプロパティ値を変更すると、属性値が変更されます。

sample.html

<style>
    #title {
        color: red;
    }
    #header {
        color: blue;
    }
</style>

<h1 id="title">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    console.log(node.attributes);
    
    ___ih_hl_start
    node.attributes[0].textContent = "header";
    ___ih_hl_end
    
    console.log(node.attributes[0]);
</script>

プレビュー

Console

NamedNodeMap {0: id, id: id, length: 1}
id="header"

プレビューに表示された文字が青色であることから、変更後のheaderのスタイルが適用されていることが分かります。

また、ブラウザの開発ツール等のHTMLドキュメントで確認することも可能です。