HTML DOM innerTextプロパティとは？使い方とサンプルコードを解説
innerTextプロパティとは
HTML DOMのinnerTextプロパティは、HTML要素の内部テキスト（画面に表示されているテキスト）を取得したり、新しいテキストに書き換えたりするために使用されます。JavaScriptから動的にページの文字列を操作したい場面でよく使われる基本的なプロパティです。
構文
innerTextプロパティの構文は以下の通りです。
1. テキストを取得する場合
object.innerText
2. テキストを設定する場合
object.innerText = "text"
サンプルコード
ここで、innerTextプロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、緑色のボックス内のテキストが切り替わるシンプルなデモです。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.box{
background-color:#347924;
width:100px;
padding:10px;
text-align:center;
font-weight:bold;
font-size:1.5rem;
color:white;
margin:1rem auto;
}
</style>
</head>
<body>
<h1>innerTextプロパティの例</h1>
<div class="box">
</div>
<button onclick="writeHi()">HIと表示</button>
<button onclick="writeHello()">HELLOと表示</button>
<script>
function writeHi() {
var outerBox = document.querySelector('.box');
outerBox.innerText = 'HI';
}
function writeHello() {
var outerBox = document.querySelector('.box');
outerBox.innerText = 'HELLO';
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで開くと、次のように表示されます。
「HIと表示」または「HELLOと表示」ボタンをクリックすると、緑色のボックス内のテキストがそれぞれ「HI」「HELLO」に書き換わります。
補足：textContentとの違い
innerTextは「画面に表示されるテキスト」を対象とするため、CSSで非表示（display:none）になっている要素のテキストは含まれません。一方、textContentは非表示のテキストも含めてすべて取得します。レンダリングを伴わないため、単純にテキストを扱う場合はtextContentの方が高速です。用途に応じて使い分けるとよいでしょう。
-
HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説
HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。構文maxLengthプロパティの基本的な構文は以下の通りです。maxLengthプロパティの設定textObject.maxLength = integerここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場
-
HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説
HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと