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

JavaScriptでボタンに表示されているテキストを取得する方法

JavaScriptでボタン上に表示されているテキストを取得するには、innerHTMLプロパティを使用します。このプロパティは、要素の開始タグと終了タグの間にあるコンテンツ（テキストやHTML）を文字列として返します。

innerHTMLプロパティの基本的な使い方

まず、document.getElementById()メソッドで対象のボタン要素を取得し、そのinnerHTMLプロパティを読み取ることで、ボタンに表示されているテキストを簡単に取得できます。

サンプルコード

以下のコードを実行して、ボタンの表示テキストを取得する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <form id = "myForm">
         <button id = "btn" type = "button">My Button</button>
      </form>
      <script>
         var str = document.getElementById("btn").innerHTML;
         document.write("Button text: "+str);
      </script>
   </body>
</html>

実行結果

このコードを実行すると、画面に「Button text: My Button」と表示されます。変数strには、ボタン内のテキスト「My Button」が文字列として格納されています。

補足：textContentプロパティとの違い

HTMLタグを含まない純粋なテキストだけを取得したい場合は、textContentプロパティを使う方法もあります。innerHTMLはHTMLマークアップごと取得・設定できるのに対し、textContentはテキストノードのみを扱います。ボタンの中身が単純なテキストであればどちらでも結果は同じですが、用途に応じて使い分けることで、より安全で意図した通りの処理が可能になります。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. jQueryで表示中のテキストのみを取得・表示する方法

    Webページ上に表示されているテキストのみを取得したい場合は、jQueryの「:visible」セレクターを活用しましょう。このセレクターは、CSSによって非表示にされていない、現在画面に表示されている要素だけを選択します。:hidden（非表示要素）とは逆の働きをするため、「display:none」が設定された要素などは自動的に除外されます。 以下では、親要素の子ノードの中から表示中の要素のみを取り出して、そのテキストを取得する具体例を紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head