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

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

HTML DOM Object dataプロパティとは

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

構文

data属性の値を取得する場合

ObjectElement.data

data属性に文字列値（URL）を設定する場合

ObjectElement.data = URLString

HTML DOM Object dataプロパティの使用例

それでは、実際のコード例を見てみましょう。以下のサンプルでは、<object>要素に設定された画像のURLを、ボタンをクリックして取得し、画面に表示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object data</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-data</legend>
            <object id="objSelect" height="200" data="https://www.tutorialspoint.com/python_blockchain/images/python-blockchain-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() {
        objSelect.data
        divDisplay.textContent = '上の画像のURL： '+objSelect.data;
    }
</script>
</body>
</html>

コードの解説

  • <object>要素： data属性に画像のURLを指定し、画像をページ内に埋め込んでいます。
  • getObjectData()関数： ボタンがクリックされると実行され、objSelect.dataでdata属性の値（URL）を取得します。
  • textContent： 取得したURLをdiv要素内のテキストとして表示します。

出力結果

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

画像とボタンだけが表示されている状態です。

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

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

クリックすると、object要素のdata属性に設定されたURLが画面に表示されます。

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

まとめ

HTML DOMのObject dataプロパティを使用すると、<object>要素のdata属性に格納されたリソースのURLをJavaScriptから簡単に取得・設定できます。動的にコンテンツを差し替えたい場合などに活用できる便利なプロパティなので、ぜひ覚えておきましょう。

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

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要

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

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