JavaScript を使用して Div のテキストを変更する

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript を使用して Div のテキストを変更する
Nithin Krishnan 2023年10月12日
JavaScript JavaScript Text
  1. innerHTML 属性を使用して div テキストを変更する
  2. textContent ノード属性を使用して Div のコンテンツを変更する
  3. 内部 HTML と textcontent セキュリティの側面
  4. :after 疑似要素を使用して div テキストを変更する
JavaScript を使用して Div のテキストを変更する

div 要素は本質的に非対話型です。Javascript は、インタラクティブにすることで生命を吹き込みます。div によって表示されるテキストを言い換える必要があるかもしれません。たとえば、編集機能を実装しているときに、追加機能を開発するために設計された画面を再利用する場合があります。言葉遣いだけを変える必要があります。追加機能については、ボタンの追加キーワードを更新などに変更する必要がある場合があります。div のテキストを動的に変更できるいくつかの方法を見てみましょう。

innerHTML 属性を使用して div テキストを変更する

他のプログラミング言語とは異なり、テキストを HTML 要素に設定するために getter メソッドと setter メソッドを使用しません。div の HTML 要素オブジェクトには、innerHTML と呼ばれる属性があります。これを使用して、HTML オブジェクトのコンテンツを取得および設定できます。ここで、HTML オブジェクトがライブになります。つまり、更新時にブラウザの要素プロパティに変更が加えられた場合に反映されます。

以下は、innerHTML を使用するための構文です。

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

上記のコードスニペットでは、htmlElement.innerHTML を使用して HTML div 要素のコンテンツを取得しています。ここで、htmlElement は実際の HTML オブジェクトです。同様に、同じ属性である要素の innerHTML を使用して、コンテンツを div に設定できます。テキストコンテンツを innerHTML に割り当てるだけです。

  • 使用法：
<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

出力：

Hello World!!
Hello bunny!!

.innerHTML を適用する前に、HTML 要素を選択する必要があります。いろいろな方法でできます。Javascript には、DOM から要素を照会するために使用できる多くの関数があります。以下は、最も一般的に使用される方法のいくつかです。

  • getElementById()：document インターフェイスのこの関数は、HTML で指定された id を使用して DOM から要素を選択するために使用されます。この関数は、選択した要素に対応する HTML オブジェクトを返します。
  • getElementsByClassName：getElementsByClassName 関数を使用して、css クラス名に基づいて要素をクエリできます。この javascript メソッドによって、複数の要素が HTML オブジェクトの配列として返されます。
  • getElementsByName：name 属性を持つ要素を選択する別の方法があります。ノードの name 属性を HTML で指定します。このメソッドは、HTML オブジェクトの配列を返します。特に、特定のスタイル、CSS クラスを持つ複数の要素を選択し、それらすべてを一度に実行することに関心がある場合は、これを使用できます。
  • getElementsByTagName：getElementsByTagName() 関数を使用して、HTML タグに基づいて要素を選択することもできます。たとえば、DOM などのセクションにあるすべての div 要素に対していくつかの操作を実行できます。名前が示すように、関数は HTML オブジェクトの配列を返します。
  • querySelector：Javascript querySelector 関数はもう少し一般的で、css クエリで HTML 要素を選択するために使用できます。この関数は、パラメーターで渡された条件を満たす最初の要素を返します。
  • querySelectorAll：これは querySelector に似ていますが、パラメータとして渡された css query 形式を満たす複数の要素を返す点が異なります。

textContent ノード属性を使用して Div のコンテンツを変更する

innerHTML は頻繁に使用しますが、使用にはセキュリティ上のリスクが伴います。これは、innerHTML が HTML 要素のコンテンツをどのように置き換えるかに関連しています。innerHTML 属性は、1 回のショットですべてのサブ HTML ノードを削除し、それに割り当てられた新しいコンテンツを追加します。

セキュリティ上のリスクは、innerHTML 属性により、有害なコードであっても、HTML コードの任意の部分を挿入できるために発生します。この点については、次のセクションで説明します。MDN は、要素のテキストを変更するために node.textContent を使用することをお勧めします。HTML 内の子ノードを、textContent パラメーターで割り当てた text に置き換えます。使用法を理解するには、次のコードを参照してください。

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

出力：

Hello bunny!!

ここでは、テキストを変更する前に、HTML 要素 div を選択します。getElementById() 関数を使用して、DOM から要素をクエリします。次に、textContent を使用して div のテキストを変更します。この変更は、画面が読み込まれたときに区別されません。ブラウザが Web ページをロードするとすぐに、window.onload 関数が実行され、テキストが変更されます。したがって、エンドユーザーには常に新しいテキストが表示されます。古いテキストから新しいテキストへの変更は、画面の読み込みでは明らかではありません。setTimeOut メソッド内の textContent を試して、変更を確認することもできます。

内部 HTML と textcontent セキュリティの側面

innerHTML 属性は textContent とは異なります。どちらの属性もテキストを入力として受け取りますが、ここでのセキュリティの脆弱性は何ですか？innerHTML では、悪意のあるコードを追加する可能性があります。次のコードスニペットを参照してください。ここでは、変更が反映され、innerHTML コードが実行されます。次のコードスニペットに示すように、薄緑色の HTML div 要素をクリックすると、望ましくない alert が画面にポップアップ表示されます。

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

textContent の同じコンテンツを div 要素に割り当てると、HTML 要素としてレンダリングされません。Javascript は、コンテンツを画面上のテキストとしてレンダリングします。したがって、ウェブページにテキストとして表示される <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> を文字通り見ることができます。この側面により、コードの安全性と信頼性が向上します。したがって、HTML 要素のテキストを変更する場合、Javascript のベストプラクティス（MDN でサポートされている）では、innerHTML 属性の代わりに textContent を使用することをお勧めします。

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

:after 疑似要素を使用して div テキストを変更する

テキストの変更が簡単な場合は、CSS を使用して div テキストを変更できます。:after 疑似 HTML 要素を使用します。ここで、表示するテキストを content 属性に追加します。ブラウザがコンテンツをロードされた画像に置き換える <img> のような HTML 要素には適用されません。次のコードは、使用法の詳細です。

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

関連記事 - JavaScript Text