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

HTML DOM アンカーの download プロパティの使い方を徹底解説

HTML DOM の download プロパティとは

HTML DOM の download プロパティは、リンク（アンカー要素）に設定された download 属性の値を取得または設定するために使用されます。この属性を利用すると、リンク先のファイルをブラウザで開かずにダウンロードさせることができ、さらに保存時のファイル名を指定することも可能です。

download プロパティの構文

download プロパティに値を設定する場合の構文は以下のとおりです。

anchorObject.download = file

ここで file には、ダウンロード時に付ける任意のファイル名を指定します。実際の拡張子は自動的に付加されるため、拡張子まで記述する必要はありません。

一方、download プロパティの値を取得する場合の構文は次のようになります。

anchorObject.download

実装例：DOM Anchor の download プロパティ

それでは、実際に download プロパティを使用したサンプルコードを見てみましょう。以下の例では、画像へのリンクに download 属性を設定し、ボタンをクリックするとその値を画面に表示します。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>ReactJS</h2>
<a id="myid" href="https://www.tutorialspoint.com/images/reactjs.png" download="Learn ReactJS">
<img src="https://www.tutorialspoint.com/images/reactjs.png" alt="ReactJS" width="200" height="200"></a>
<button onclick="display()">Display the value</button>
<p id="demo"></p>
<script>
    function display() {
        var val = document.getElementById("myid").download;
        document.getElementById("demo").innerHTML = val;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ReactJS の画像リンクと「Display the value」ボタンが表示されます。

ボタンをクリックすると、JavaScript の display() 関数が実行され、getElementById() メソッドでアンカー要素の download プロパティの値が取得されます。その結果、「Learn ReactJS」という文字列が画面に出力されます。

まとめ

HTML DOM の download プロパティを使えば、JavaScript から動的にダウンロード属性の値を読み書きできます。ユーザーがクリックしたタイミングでダウンロードファイル名を変更したい場合など、インタラクティブな Web サイトを構築する際に非常に便利な機能です。

  1. HTML DOMアンカーのrelプロパティとは？取得・設定方法をわかりやすく解説

    HTML DOMのrelプロパティは、リンク（<a>タグ）のrel属性の値を取得または設定するためのプロパティです。rel属性は「relation（関係）」の略で、現在のドキュメントとリンク先のドキュメントとの関係性を記述します。 構文 relプロパティの構文は以下の通りです。 ① 値を取得する場合 anchorObject.rel ② 値を設定する場合 anchorObject.rel = 値 サンプルコード HTML DOMアンカーのrelプロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <body>

  2. HTML DOMアンカーのhostnameプロパティの使い方を解説

    HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）hostname：ホスト名のみを返す（例：www.demo.com）hostnameプロパティを設定する構文hostnameプロパティに値を設定する場合は、以下のように記述します。anchorObj.hostname = hostname上記の「hostname」には、設定したいUR