このガイドでは、JavaScript で HTML DOM 要素の「textContent」プロパティにアクセスして操作する方法を説明します。
まず、HTML DOM の「textContent」プロパティの基本を見てください。
JavaScript の HTML DOM の「textContent」プロパティとは何ですか?
” テキストコンテンツ 」は、指定された要素またはノード (そのすべての子孫を含む) のテキストを設定、取得、および変更する組み込みプロパティです。子孫は、書式設定の目的で使用される 、 、 などの子要素です。 「textContent」プロパティを使用してテキストを設定すると、対象の要素の子孫が新しいテキストに完全に置き換えられます。
構文(テキスト内容の設定)
「」を使用して要素/ノードのテキストを設定する基本的な構文 テキストコンテンツ ” プロパティは以下のように記述されます。
要素。 テキストコンテンツ = 文章 | ノード。 テキストコンテンツ = 文章
上記の構文は、必要な「」を受け取ります。 文章 」をユーザーが要素またはノードに設定したい値として指定します。
構文(テキストコンテンツの取得)
「」を介して要素またはノードのテキストを返す一般化された構文 テキストコンテンツ 」プロパティはここに記載されています:
要素。 テキストコンテンツ | ノード。 テキストコンテンツ戻り値: ” テキストコンテンツ ” プロパティは、” を返します。 文章 ” スペースを含むが内部 HTML タグを含まない要素またはノードの。
次に、上記で定義した構文を実際に使用して、「textContent」プロパティにアクセスして操作します。
JavaScript で HTML DOM 要素の「textContent」プロパティにアクセスして操作する方法
「innerHTML」および「innerText」プロパティと同様に、「 テキストコンテンツ 」プロパティを使用すると、ユーザーは目的の要素のテキストを簡単に設定、アクセス、および変更できます。このセクションでは、以下の例を使用して、要素に対してこれらの操作をすべて実行します。
例 1: 「textContent」プロパティを適用して要素/ノードのテキストにアクセスする
この例では、「textContent」プロパティを適用して、そのすべての子を含む特定の要素またはノードのテキストを返します。
HTMLコード
< ディビジョン ID = 「私のディビジョン」 マウスオーバーで = 「getText()」 スタイル = 'ボーダー: 3 ピクセル黒一色;幅: 400 ピクセル; パディング: 5 ピクセル 5 ピクセル; マージン: 自動;' >< h1 > 最初の見出し < / h1 >
< h2 > 2番目の見出し < / h2 >
< h3 > 3番目の見出し < / h3 >
< h4 > 4番目の見出し < / h4 >
< h5 > 第 5 見出し < / h5 >
< h6 > 第 6 見出し < / h6 >
< / ディビジョン >
HTML コードの上記の行では次のようになります。
- ” ID が「myDiv」のタグは、次のプロパティの border、width、padding (上下、左右)、および margin でスタイル設定された div 要素を作成します。 「」も付いています。 マウスオーバーで 「」を呼び出すイベント getText() 」機能は、ユーザーがマウスをその上に置くと機能します。
- div 内では、指定されたすべての見出し (h1、h2、h3、h4、h5、および h6) タグによって、指定されたレベルに従って見出し要素が挿入されます。
JavaScript コード
< 脚本 >
関数getText ( ) {
エレムだった = 書類。 getElementById ( 「私のディビジョン」 ) ;
警告 ( 要素。 テキストコンテンツ ) ;
}
脚本 >上で書いた JavaScript コード ブロックでは次のようになります。
- 「」という名前の関数を定義します。 getText() ”。
- この関数内では、「elem」変数が「 getElementById() 」メソッドを使用して、その ID を通じて div 要素にアクセスします。
- ” アラート() ” メソッドは、” を使用するアラート ボックスを作成します。 テキストコンテンツ 」プロパティを使用して、親 div のテキストとそのすべての依存関係を返します。
出力
以下の出力では、div 要素のテキスト内容を示すアラート ボックスがポップアップ表示されます。
例 2: 「textContent」プロパティを適用して、子孫を含む要素のテキスト コンテンツを置換する
この例は、テキストを変更する際に、「textContent」プロパティが要素のすべての子を置き換える方法を示しています。
HTMLコード
< 中心 >
< h1 ID = '私の頭' クリック時 = 「modifyText()」 >< b > これ b > は < スパン > 見出し < スパン > < 私 > 要素 私 > h1 >
中心 >上記のコード行では次のようになります。
- ” ” タグは、” が付加されたレベル 1 の見出し要素を追加します。 クリック時 「」を呼び出すイベント 変更テキスト() ユーザーがクリックすると、「」機能が追加されます。
- 見出し要素には「」も含まれます。 '、' <スパン> '、 そして ' ” はその子孫としてタグ付けされます。 「 」タグは囲まれた文字列を太字にするために使用され、スタイリング プロパティのない「」タグは指定された文字列にスタイルを適用しないために使用され、「 」タグは文字列を表示するために使用されます。指定された文字列は斜体で表示されます。
JavaScript コード
< 脚本 >
ここで h1 = 書類。 getElementById ( '私の頭' ) ;
コンソール。 ログ ( h1 ) ;
関数modifyText ( ) {
h1. テキストコンテンツ = 「Linuxhint へようこそ!」 ;
コンソール。 ログ ( h1 )
}
脚本 >上記の JavaScript コードでは次のようになります。
- 「h1」変数は「 document.getElementById() 」メソッドを使用して、割り当てられた ID を通じて見出し要素にアクセスします。
- ” console.log() 」メソッドは、内容を変更する前に、アクセスされた見出し要素をコンソールに表示します。
- 「」という名前の機能 変更テキスト() 「」は「」を使用します。 テキストコンテンツ 」プロパティを使用して、フェッチされた見出し要素のテキストを変更します。
- 最後の「console.log()」メソッドは、変更後の「h1」値を再度表示します。
出力
コンソールには、クリックすると、指定された見出し要素のすべての子が新しく指定されたテキストに置き換えられたことが明確に表示されます。
例 3: 「textContent」プロパティを適用して要素の子のテキストを変更する
この例では、「textContent」プロパティを使用して、特定の要素の子のテキストを変更します。
HTMLコード
< ディビジョン ID = 「私のディビジョン」 スタイル = 'ボーダー: 3 ピクセル黒一色;幅: 400 ピクセル; パディング: 5 ピクセル 5 ピクセル; マージン: 自動;' >
< 中心 >
< ボタン ID = 「ボタン」 マウスオーバーで = 「changeText()」 > 古いボタン < / ボタン >
< / 中心 >
< / ディビジョン >このシナリオでは:
- 「div」要素には「button」要素があり、「 <ボタン> ' 鬼ごっこ。
- ボタン要素には、割り当てられた ID と「 マウスオーバーで 』を呼ぶイベント。 ChangeText() 」 マウスを上に置くと機能します。
JavaScript コード
< 脚本 >
親要素でした = 書類。 getElementById ( 「私のディビジョン」 ) ;
変数ターゲット = 書類。 getElementById ( 「ボタン」 ) ;
find_meでした = 親要素。 含まれています ( 目標 ) ;
もし ( 親要素。 含まれています ( 目標 ) == 真実 ) {
コンソール。 ログ ( 私を見つけて ) ;
関数変更テキスト ( ) {
目標。 テキストコンテンツ = 「新しいボタン」 ;
}
} それ以外 {
コンソール。 ログ ( '存在しない' )
}
脚本 >上記のコード スニペットでは次のようになります。
- 「parentElement」変数は「 getElementById() ” メソッドを使用して親 div 要素にアクセスします。 「target」変数も「getElementById()」メソッドを利用して、その ID を使用して追加されたボタン要素を取得します。
- 「find_me」変数は「 を含む() 」メソッドを使用して、対象のボタン要素が div の子であるかどうかを確認します。このメソッドは「」を返します。 真実 「はい」の場合は「偽」です。
- ” if-else ” ステートメントはコード ブロックを定義します。
- 対象の要素が親要素の子である場合、「 ChangeText() ” 関数は、” を介してテキストを変更します。 テキストコンテンツ ' 財産。それ以外の場合は、「else」コード ブロックが実行され、「」を使用して指定されたメッセージが表示されます。 console.log() ' 方法。
出力
コンソールには「 真実 ボタン要素が指定された div の子であることを検証するブール値で、マウスをその上に置くとテキストが変更されます。
textContent、innerText、および innerHTML プロパティの違いは?
一般的に、「 テキストコンテンツ '、' 内部テキスト '、 そして ' 内部HTML 」プロパティは、要素またはノードのテキストを設定および取得する方法で処理します。ただし、これらのプロパティはいくつかの要因に基づいて互いに異なります。このセクションでは、それらすべての主な違いを強調します。
条項 「テキストコンテンツ」 「内部テキスト」 「インナーHTML」 戻り値の型 すべての子 (書式設定タグ)、CSS の隠しテキスト、およびスペースを含む要素のテキストを返します。要素の HTML タグは返されません。 ターゲットの HTML 要素のテキスト コンテンツとそのすべての子 (フォーマット タグ) を返します。スペース、CSS 隠しテキスト、および