HTML DOM 変数（var）オブジェクトとは？使い方をサンプルコードで解説
HTML DOM 変数オブジェクトとは
HTML DOM の変数オブジェクトは、HTML ドキュメント内の <var> 要素を表すオブジェクトです。<var> 要素は、プログラムの変数名などを示すために使用され、通常はイタリック体で表示されます。
JavaScript を使えば、この var オブジェクトを動的に生成し、ページに追加することができます。
var オブジェクトの作成方法
構文
var オブジェクトを作成するには、以下の構文を使用します。
document.createElement("VAR");var オブジェクトの実装例
それでは、var オブジェクトを実際に作成するサンプルコードを見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
background-color: #fff;
color: #0197F6;
}
h1 {
color: #23CE6B;
}
.btn {
background-color: #fff;
border: 2px solid #0197F6;
height: 2rem;
width: 40%;
margin: 2rem auto;
display: block;
color: #0197F6;
outline: none;
cursor: pointer;
border-radius: 20px;
}
</style>
<body>
<h1>DOM var Object デモ</h1>
<button onclick="createHr()" class="btn">var オブジェクトを作成する</button>
<script>
function createHr() {
var varElement = document.createElement("VAR");
varElement.innerHTML = 'これは HTML 内の var 要素です';
document.body.appendChild(varElement);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「var オブジェクトを作成する」ボタンをクリックすると、JavaScript の createElement("VAR") メソッドによって新しい var 要素が生成され、appendChild() メソッドを使って body 要素の末尾に追加されます。
ボタンをクリックした後、テキストがイタリック体で表示されているのが確認できます。これが <var> 要素のデフォルトのスタイルです。
ポイントまとめ
document.createElement("VAR")で var 要素を動的に作成できるinnerHTMLプロパティで要素内のテキストを設定するappendChild()メソッドで作成した要素をドキュメントに追加する- var 要素の内容はブラウザ上でイタリック体として表示される
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注