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

HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

HTML DOM Object の form プロパティとは

HTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。

構文

form オブジェクトへの参照を取得する場合、以下のように記述します。

ObjectElement.form

戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要素がどのフォームにも含まれていない場合は、null が返される点に注意してください。

実装例

それでは、Object form プロパティの具体的な使用例を見ていきましょう。以下のサンプルでは、ボタンをクリックすると、<object> 要素が属するフォームの ID を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object form</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form id="Home Page">
        <fieldset>
            <legend>HTML-DOM-Object-form</legend>
            <object id="objSelect" height="200" data="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg"></object>
            <input type="button" onclick="getObjectForm()" value="Get location of pic in website">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var objSelect = document.getElementById("objSelect");
    function getObjectForm() {
        divDisplay.textContent = 'Location of above picture: '+objSelect.form.id;
    }
</script>
</body>
</html>

コードの解説

このサンプルコードのポイントは以下の通りです。

  • <form id="Home Page"> の中に <object> 要素を配置しています。
  • ボタンをクリックすると getObjectForm() 関数が呼び出されます。
  • 関数内で objSelect.form.id を参照することにより、<object> 要素を囲むフォームの ID（「Home Page」）を取得し、div 要素に出力しています。

実行結果

「Get location of pic in website」ボタンをクリックする前の表示は次のようになります。

HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

「Get location of pic in website」ボタンをクリックした後には、画像が属するフォームの場所（ID）が表示されます。

HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

まとめ

HTML DOM の form プロパティを使えば、<object> 要素がどのフォームに含まれているのかを簡単に参照できます。フォームと連動した動的なコンテンツ制御を行いたい場合に便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注