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

HTML DOM の HTML オブジェクトとは？基本の構文と実装例をわかりやすく解説

HTML オブジェクトとは

HTML DOM における HTML オブジェクトは、HTML ドキュメントのルート要素である <html> 要素を表します。このオブジェクトにアクセスすることで、ページ全体の構造や内容を JavaScript から操作できるようになります。

ここでは、HTML オブジェクトへのアクセス方法と、実際に動作するサンプルコードを紹介します。

構文

HTML オブジェクトにアクセスする基本的な構文は以下のとおりです。

document.getElementsByTagName("HTML")

getElementsByTagName() メソッドにタグ名 "HTML" を指定すると、<html> 要素が HTMLCollection として返されます。先頭の要素を取得する場合は、[0] を付けてアクセスします。

サンプルコード

次の例では、ボタンをクリックすると <html> タグ内のすべての内容（innerHTML）を取得し、画面に表示します。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .btn{
        background-color:lightblue;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
    margin:1rem auto;
    }
    .show{
        font-size:1rem;
        font-weight:bold;
        color:orange;
        border:2px solid green;
        padding:10px;
        display:none;
    }
</style>
</head>
<body>
<h1>DOM HTML Object Example</h1>
<button type="button" onclick="getContent()" class="btn">クリックして HTML タグ内の内容を取得</button>
<div class="show"></div>
<script>
    function getContent(){
        var content=document.getElementsByTagName("HTML")[0].innerHTML;
        document.querySelector(".show").innerHTML = content;
        document.querySelector(".show").style.display ="block";
    }
</script>
</body>
</html>

コードの解説

このサンプルのポイントは以下のとおりです。

  • getContent() 関数：ボタンがクリックされると呼び出されます。
  • getElementsByTagName("HTML")[0]：ドキュメント内の <html> 要素を取得します。
  • innerHTML：<html> タグ内のすべての HTML コンテンツを文字列として取得します。
  • 表示処理：取得した内容を .show クラスの div 要素に挿入し、display を block に変更して画面に表示します。

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM の HTML オブジェクトとは？基本の構文と実装例をわかりやすく解説

青いボタンをクリックすると、ページの <html> タグ内にあるすべての内容が取得され、下の緑色の枠内に表示されます。

HTML DOM の HTML オブジェクトとは？基本の構文と実装例をわかりやすく解説

まとめ

HTML オブジェクトは、document.getElementsByTagName("HTML") を使うことで簡単にアクセスできます。ページ全体のソースコードを動的に取得・表示したい場合などに役立つため、DOM 操作の基礎として覚えておくと良いでしょう。

  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 ではサポートされていないため注