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

HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。

Object 要素の作成方法

JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。

var objectElement = document.createElement("OBJECT");

Object オブジェクトの主なプロパティ

ここで作成した「objectElement」には、以下のプロパティが用意されています。

プロパティ説明
dataオブジェクト要素が使用するリソースの URL を設定・取得します
formオブジェクト要素を囲んでいるフォームへの参照を返します
heightオブジェクト要素の高さを設定・取得します
nameオブジェクト要素の名前を設定・取得します
typedata 属性を通じてダウンロードされるデータのコンテンツタイプ（MIME タイプ）を設定・取得します
useMapオブジェクト要素で使用するクライアントサイドイメージマップの名前を設定・取得します
widthオブジェクト要素の幅を設定・取得します

HTML DOM Object オブジェクトの使用例

次に、<object> 要素の data プロパティを使って、埋め込まれた画像の URL を取得する具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object object</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>
        <fieldset>
            <legend>HTML-DOM-Object-Object</legend>
            <object id="objSelect" height="200" data="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg"></object>
            <input type="button" onclick="getObjectData()" value="Get URL">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var objSelect = document.getElementById("objSelect");
    function getObjectData() {
        divDisplay.textContent = 'URL of above picture: '+objSelect.data;
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、まず画像が表示された状態で画面が出力されます。

「Get URL」ボタンをクリックする前：

HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

ボタンをクリックすると、JavaScript の getObjectData() 関数が呼び出され、<object> 要素の data プロパティから画像の URL が取得され、画面に表示されます。

「Get URL」ボタンをクリックした後：

HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説


  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

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

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