HTML DOM Ulオブジェクトとは？要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。
<ul> 要素の作成方法
新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。
var ulObject = document.createElement("UL")HTML5で非推奨となったプロパティ
ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注意が必要です。
| プロパティ | 説明 |
|---|---|
| compact | 順序なしリストを通常よりもコンパクト（小さめ）に表示するかどうかを設定・取得します |
| type | 順序なしリストの type 属性の値を設定・取得します |
これらのプロパティは旧仕様のものであり、現在のWeb開発では CSS を使ったスタイリングが推奨されています。
順序なしリスト要素の実装例
ここでは、<ul> 要素を使ったメニュー選択のサンプルを見てみましょう。リスト項目（<li>）をクリックすると、選択された項目が画面に表示される仕組みです。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>Ul item()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>item( )</legend>
<h2>Menu</h2>
<ul>
<li onclick="getOrder(0)">Mac & Cheese</li>
<li onclick="getOrder(1)">Pizza</li>
<li onclick="getOrder(2)">Burger</li>
</ul>
<div id="divDisplay">Click on menu item to order it</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var menuSelect = document.getElementsByTagName("li");
function getOrder(index) {
divDisplay.textContent = 'Order: '+(menuSelect.item(index)).textContent;
}
</script>
</body>
</html>実行結果
このコードを実行すると、メニューリストが表示されます。
<li> 要素をクリックする前
「Click on menu item to order it（メニュー項目をクリックして注文してください）」というメッセージが初期表示されます。
<li> 要素をクリックした後
リスト項目をクリックすると、item() メソッドによって該当する要素が取得され、「Order:」に続いて選択したメニュー名が表示されます。
まとめ
HTML DOM の Ul オブジェクトを利用すると、JavaScript から順序なしリストを自由に操作できます。特に item() メソッドは、インデックスを指定してリスト項目へアクセスできる便利な機能です。ただし、compact や type プロパティは HTML5 で廃止されているため、リストの見た目を調整する場合は CSS を使用しましょう。
-
HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法
HTML DOM dlオブジェクトとはHTML DOMのdlオブジェクトは、HTMLの<dl>要素に関連付けられたオブジェクトです。<dl>要素は「記述リスト（description list）」を作成するためのもので、用語（<dt>）とその説明（<dd>）をセットで表現します。dlオブジェクトを利用することで、JavaScriptから<dl>要素を動的に生成したり、ページ内の既存の記述リストにアクセスして操作したりすることができます。構文記述リストを作成する場合の基本的な構文は以下の通りです。var p = document.cre
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme