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

HTML DOM Metaオブジェクトとは？メタタグを動的に操作する方法を解説

HTML DOM Metaオブジェクトとは

HTML DOMのMetaオブジェクトは、HTMLドキュメント内の<meta>要素をJavaScriptから操作するためのインターフェースです。このオブジェクトを利用することで、ページの文字コードや説明文、キーワードといったメタ情報を、動的に作成・変更することができます。

構文

Metaオブジェクトの基本的な構文は以下の通りです。

<meta>要素を作成する場合：

var metaObject = document.createElement("META")

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

metaObjectには、以下のプロパティが用意されています。

プロパティ説明
content<meta>要素のcontent属性の値を設定・取得します
httpEquiv<meta>要素のcontent属性の情報に対応するHTTPヘッダーを設定・取得します
name<meta>要素のcontent属性の情報に対する名前を設定・取得します
schemecontent属性の値をどのように解釈するかを設定・取得します（※HTML5ではサポートされていません）

使用例

以下は、HTML DOMのMetaオブジェクトを使った具体的なサンプルコードです。ボタンをクリックすると、新しいメタタグが動的に生成され、head要素へ追加されます。

<!DOCTYPE html>
<html>
<head>
<title>Meta 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>Meta-Object</legend>
<h2>Tutorial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<input type="button" onclick="createMeta()" value="Create Meta Tag">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    function createMeta(){
        var metaTag = document.createElement('META');
        metaTag.setAttribute("name", "tutorialsContent");
        metaTag.setAttribute("content", "JS tutorials");
        document.head.appendChild(metaTag);
        divDisplay.textContent = '<meta name="'+metaTag.name+'" content="'+metaTag.content+'" >';
    }
</script>
</body>
</html>

コードのポイント

このサンプルでは、document.createElement('META')で新しいメタ要素を生成し、setAttribute()メソッドを使ってname属性とcontent属性を設定しています。その後、document.head.appendChild()により、生成したメタタグをhead要素の末尾に追加しています。

実行結果

上記のコードをブラウザで実行すると、以下のような結果が表示されます。

「Create Meta Tag」ボタンをクリックする前：

HTML DOM Metaオブジェクトとは？メタタグを動的に操作する方法を解説

「Create Meta Tag」ボタンをクリックした後：

HTML DOM Metaオブジェクトとは？メタタグを動的に操作する方法を解説

ボタンをクリックすると、画面上に生成されたメタタグの内容（name属性とcontent属性の値）が表示され、同時にhead要素内へメタタグが動的に追加されていることが確認できます。

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

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(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 ではサポートされていないため注