HTML DOMのactiveElementプロパティとは？使い方とサンプルコードを解説
HTML DOM activeElementプロパティとは
activeElementプロパティは、HTML DOMに用意されている読み取り専用（read-only）のプロパティです。現在、ドキュメント内でフォーカスされている要素を取得することができます。
例えば、テキスト入力欄がクリックされて入力待ちの状態になっている場合や、ボタンがキーボード操作で選択されている場合など、その時点でアクティブになっている要素をJavaScriptから簡単に参照できます。
構文（シンタックス）
activeElementプロパティの基本的な構文は以下の通りです。
document.activeElement
このプロパティは戻り値として、現在フォーカスされている要素（HTMLElementオブジェクト）を返します。どの要素にもフォーカスがない場合は、<body>要素が返される点に注意してください。
実装例
それでは、実際にactiveElementプロパティを使ったサンプルコードを見てみましょう。以下の例では、ページ上の要素をクリックすると、その時点でアクティブになっている要素のタグ名を画面に表示します。
サンプルコード
<!DOCTYPE html>
<html>
<body onclick="display()">
<h2>見出し（Heading Two）</h2>
<p>要素をクリックすると、アクティブな要素を取得できます。</p>
<input type="text" value="テキストを入力...">
<p id="myid"></p>
<script>
function display() {
var a = document.activeElement.tagName;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>コードの解説
- body要素のonclick属性： ページ内のどこかがクリックされるたびに
display()関数が呼び出されます。 - document.activeElement.tagName： 現在フォーカスされている要素のタグ名（大文字）を取得します。
- innerHTMLへの代入： 取得したタグ名を、id属性が「myid」の段落要素内に表示します。
実行結果
ページを開いた直後の状態は以下のようになります。
次に、テキスト入力欄をクリックしてみましょう。クリックされたinput要素にフォーカスが移るため、「INPUT」というタグ名が表示されます。
このように、activeElementプロパティを使えば、ユーザーが現在操作している要素を動的に把握できます。フォームバリデーションやキーボードナビゲーションの実装など、さまざまな場面で活用できる便利なプロパティです。
-
HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説
HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ
-
HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説
HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明