JavaScript の textContent プロパティは、ページのテキスト コンテンツを設定および取得するために機能します。一部の情報、タグ、および大きなサイズのデータとそのノードのテキスト コンテンツを渡して表示するために使用されます。 TextContent は、スクリプト タグの nodeValue とは異なり、複数のデータ型の子ノードからコンテンツを返します。
ノードがテキスト ノード、処理命令、またはタグ リマークの場合、javascript textContent はテキストを取得または設定します。 TextContent は、各子ノードの textContent を連結したものを示します。他のノードタイプへの処理命令とコメントを示します。
構文
JavaScript テキスト コンテンツには 2 つの構文が使用できます。最初の構文はノードのテキストを設定するために使用され、2 番目の構文はノードのテキストを取得するために使用されます。
構文 1:
次の構文は、テキスト コンテンツを使用してノードのテキストを設定するために使用されます。
左結合と右結合
Node_element.textContent = information;
構文 2:
次の構文では、テキスト コンテンツを使用してノードのテキストを取得します。
Node_element.textContent;
戻り値:
- 文字列には、出力ノードとその子ノードのテキストが含まれます。要素がドキュメントまたはドキュメント タイプの場合、出力には null 値が表示されます。
- 子ノードは、textContent 属性のセットを使用して単一の Text ノードに置き換えられます。属性には、内容として特定の文字列が含まれます。
例
次の例は、textContent 属性を使用してさまざまな種類の情報を設定および取得する方法を示しています。
例1
次の例では、JavaScript のテキスト コンテンツを使用して情報を設定します。ノード データにはタグのテキストが表示されます。
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
例 2
次の例では、JavaScript のテキスト コンテンツを使用して情報を取得します。クリック関数のボタンの値を取得できます。
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
例 3
次の例では、JavaScript のテキスト コンテンツを使用して情報を取得します。クリック関数のボタンの値を取得できます。
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
例4
Java文字列を逆にする
次の例では、ボタン値のテキスト コンテンツを使用して情報を取得および設定します。ボタンをクリックすると値を取得できます。
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
例5
次の例では、innerHtml、innerText、およびボタン値のテキスト コンテンツを使用して情報を取得および設定します。ボタンをクリックした後の出力データの差分を取得できます。
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
PCを速くするものは何ですか
例6
次の例では、リスト データを取得し、onclick ボタンの値のテキスト コンテンツを使用して情報を設定します。リストのデータやその他のタグ情報を取得できます。
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } 出力
次の図は、コンテンツ ノードを使用してデータを設定する様子を示しています。
例 7
情報または文字列が空の場合、テキスト コンテンツは空のデータをサポートしません。空の文字列を値として表示します。
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } 出力
次の図は、テキスト コンテンツ ノードを使用してデータを取得する様子を示しています。
JavaScriptのテキスト内容のポイント
- JavaScript 情報が HTML を自動的に削除する場合、textContent の利用は安全です。
- テキストのコンテンツと情報には、スペースと内部要素タグが含まれます。 innerHTML 属性はそれを返します。
- innerText 属性は、スペースや内部要素タグを含まないテキストのみを返します。 textContent プロパティは、スペースを含むが内部要素タグを除いたテキストを返します。
- サブツリー内のすべてのテキスト ノードの値が結合されてテキスト コンテンツに設定され、テキスト コンテンツから取得されます。ノードに子がない場合、文字列は空になります。
- innerText は人間が判読できるテキストを返し、任意の CSS を取り込みます。データに html タグが使用されている場合、テキストの内容が読みにくくなります。
- ノードにプロパティが設定されると、そのすべての子が削除され、単一のテキスト ノードが指定された値で置き換えられます。
結論
テキスト コンテンツには複数の種類の情報が表示されます。 htmlタグに必要な情報とリストデータを単一のメソッドで表示します。