DevNotes - JavaScript

textContent ノード内のテキストを取得

2022-04-11

構文

ノードと子孫ノードのテキストを取得。
text = node.textContent; // 取得
node.textContent = text; // 設定

innerText との違い

node.textContent は script要素や style要素を含む、すべての要素内のテキストを取得する。
brタグは無視され、span要素は中身のテキストのみ取得する。

element.innerText は人間が読める・ブラウザに表示されるテキストを取得し、スタイルで非表示に設定されているテキストは返さない。

innerHTML との違い

node.textContent は値がHTMLとして解析されず、特殊文字が含まれる場合はエスケープされ、ただの文字列として扱われる。
タグを設定するなら element.innerHTML を使う。

取得 html

<div id="text1">
    <p>p</p>
    <span>span</span>
    <p>br1<br>br2</p>
</div>

取得 js

const text1 = document.getElementById("text1").textContent;
console.log(text1);
/*

    p
    span
    br1br2

*/

設定 html (before)

<div id="text2"><p>p1&p2</p></div>

設定 js

document.getElementById("text2").textContent = "<div id="text2"><p>p1&p2</p></div>";

設定 html (after)

const text2 = document.getElementById("text2").textContent;
console.log(text2); // "&lt;div id=&quot;text2&quot;&gt;&lt;p&gt;p1&amp;p2&lt;/p&gt;&lt;/div&gt;"