HTML DOM の small オブジェクトとは？作成とアクセスの基本を解説
HTML DOM の small オブジェクトは、HTML の <small> 要素に関連付けられたオブジェクトです。<small> 要素は、テキストを周囲よりひと回り小さく表示するための要素で、細かい注釈や免責事項、著作権表記などによく使用されます。
JavaScript を使えば、createElement() メソッドで small 要素を新しく作成したり、getElementById() メソッドで既存の small 要素にアクセスしたりすることができます。
構文
small オブジェクトを作成する際の基本構文は以下の通りです。
var s = document.createElement("SMALL");document.createElement() の引数に「SMALL」を指定すると、新しい small 要素がメモリ上に生成されます。ただしこの時点ではまだ画面には表示されないため、後述の appendChild() などを使って DOM ツリーに追加する必要があります。
サンプルコード
続いて、small オブジェクトを使った具体的な例を見てみましょう。以下のコードでは、ボタンをクリックすると小さなテキストを持つ small 要素が動的に作成され、ページに追加されます。
<!DOCTYPE html>
<html>
<body>
<h1>Small object example</h1>
<p>Create a small element containing some text by clicking the below button</p>
<button onclick="CreateSmall()">CREATE</button>
<p>This is normal text</p>
<script>
function CreateSmall() {
var s = document.createElement("SMALL");
var txt = document.createTextNode("This is small text");
s.appendChild(txt);
document.body.appendChild(s);
}
</script>
</body>
</html>コードの解説
このサンプルの処理の流れは以下の通りです。
document.createElement("SMALL")：新しい small 要素を作成します。document.createTextNode()：表示するテキストノードを生成します。s.appendChild(txt)：テキストノードを small 要素の子ノードとして追加します。document.body.appendChild(s)：small 要素を body の末尾に追加して画面に表示します。
出力結果
上記のコードを実行すると、最初に次のような画面が表示されます。
CREATE ボタンをクリックすると、「This is small text」というテキストが、周囲の通常テキストよりも小さなサイズで表示されます。
-
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 ではサポートされていないため注