HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM textContentプロパティの使い方を徹底解説

HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。

textContentプロパティの構文

文字列値の取得

Node.textContent

戻り値は以下のいずれかになります。

  • documentノードの場合は「null」
  • 指定したノードとそのすべての子ノードのテキスト

文字列値の設定

Node.textContent = string

注意： textContentプロパティに値を設定すると、ノードとその子ノードのテキストがすべて、単一のテキスト文字列として置き換えられます。

textContentプロパティの実装例

それでは、HTML DOMのtextContentプロパティの具体的な使用例を見ていきましょう。以下のサンプルでは、学生のリストから「Bina」が存在するかどうかをtextContentを使って確認しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM textContent</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ul{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-textContent</legend>
            <h3>Students</h3>
            <ul>
                <li>Adam</li>
                <li>Alex</li>
                <li>Bina</li>
                <li>Eden</li>
                <li>Rajesh</li>
                <li>Zampa</li>
            </ul>
            <input type="button" onclick="checkForBina()" value="Confirm for Bina">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementsByTagName("li");
    var status = 'not Present';
    function checkForBina() {
        for(var i=0; i<studentList.length; i++){
            if(studentList[i].childNodes[0].textContent === 'Bina'){
                status = 'Present';
                break;
            }
        }
        divDisplay.textContent = 'Bina is '+status;
    }
</script>
</body>
</html>

実行結果

「Confirm for Bina」ボタンをクリックする前

HTML DOM textContentプロパティの使い方を徹底解説

初期状態では、学生名のリストが表示され、結果を表示する領域は空のままです。

「Confirm for Bina」ボタンをクリックした後

HTML DOM textContentプロパティの使い方を徹底解説

ボタンをクリックすると、各li要素のchildNodes[0].textContentを順番に比較し、「Bina」と一致する要素が見つかった時点でstatusが「Present」に更新されます。最終的に、divDisplay要素のtextContentに「Bina is Present」という結果が出力されます。

まとめ

textContentプロパティを使うことで、要素のテキスト内容の取得と設定をシンプルなコードで実現できます。innerHTMLと異なりHTMLタグを解釈せず純粋なテキストとして扱うため、XSS対策の観点からも安全にテキストを操作できるのが大きなメリットです。

  1. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使