element.textContentは、「element」に指定した要素のテキストコンテンツを取得、もしくは、設定するプロパティ。
構文
取得
var $textContent = $elementNodeReference.textContent;
戻り値
指定した要素のテキストコンテンツ。
設定
$elementNodeReference.textContent = テキスト;
サンプル
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
リスト項目のテキストコンテンツ：
サンプルの動作について
「getTextContent()」ボタンをクリックすると、「リスト項目のテキストコンテンツ：」の右横に「項目Ａ, 項目Ｂ, 項目Ｃ, 」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getTextContent() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $textContent = "";
for( i=0; i < $children.length; i++ ){
$textContent += $children[i].textContent + ", ";
}
document.getElementById( "sampleOutput" ).textContent = $textContent;
}
</script>
function getTextContent() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $textContent = "";
for( i=0; i < $children.length; i++ ){
$textContent += $children[i].textContent + ", ";
}
document.getElementById( "sampleOutput" ).textContent = $textContent;
}
</script>
CSS
<style type="text/css">
#sample{
width: 400px;
padding: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
</style>
#sample{
width: 400px;
padding: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
</style>
HTML
<ul id="sample">
<li>項目<b>Ａ</b></li>
<li>項目<font style="color: red;">Ｂ</font></li>
<li>項目<i>Ｃ</i></li>
</ul>
<button onclick="getTextContent();">getTextContent()</button>
<p>リスト項目のテキストコンテンツ：<span id="sampleOutput"></span></p>
<li>項目<b>Ａ</b></li>
<li>項目<font style="color: red;">Ｂ</font></li>
<li>項目<i>Ｃ</i></li>
</ul>
<button onclick="getTextContent();">getTextContent()</button>
<p>リスト項目のテキストコンテンツ：<span id="sampleOutput"></span></p>