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

HTML DOMのliオブジェクトとは？構文・valueプロパティ・実装例をわかりやすく解説

HTML DOMにおけるLiオブジェクトは、HTMLドキュメント内の<li>（リスト項目）要素を表すオブジェクトです。JavaScriptを使うことで、順序リストや箇条書きリストの各項目を動的に生成・変更することができます。

構文

<li>要素を作成するための基本的な構文は以下の通りです。

var liObject = document.createElement("LI")

document.createElement()メソッドに"LI"を渡すことで、新しいリスト項目要素をプログラムから生成できます。

プロパティ

Liオブジェクトには、以下のプロパティが用意されています。

プロパティ
説明
value
<li>要素のvalue属性の値を取得または設定します。この値を変更することで、リスト項目の表示番号を制御できます

サンプルコード

ここでは、valueプロパティを使った具体例を見てみましょう。次のデモでは、レース結果のリストを表示し、「Alex Cheated（アレックスが不正）」ボタンをクリックすると、1位の選手が失格となり、残りの選手の順位番号が自動的に繰り上がる仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ol{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-value</legend>
<h3>Race Result</h3>
<ol id="race">
<li>Alex</li>
<li>Eden</li>
<li>Samuel</li>
<li>Zampa</li>
</ol>
<input type="button" onclick="rectifyResult()" value="Alex Cheated">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementsByTagName("li");
    var race = document.getElementById("race");
    function rectifyResult() {
        studentList[1].value = '1';
        studentList[2].value = '2';
        studentList[3].value = '3';
        race.removeChild(studentList[0])
        divDisplay.textContent = 'Alex is disqualified';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

「Alex Cheated」ボタンをクリックする前：

HTML DOMのliオブジェクトとは？構文・valueプロパティ・実装例をわかりやすく解説

「Alex Cheated」ボタンをクリックした後：

HTML DOMのliオブジェクトとは？構文・valueプロパティ・実装例をわかりやすく解説

ボタンをクリックすると、1位だったAlexの<li>要素が削除され、残りのEden・Samuel・Zampaの各項目に対してvalueプロパティで新しい番号（1〜3）が設定されるため、リストの表示順位が正しく更新されます。このように、valueプロパティを活用すれば、リスト項目の番号をJavaScriptから柔軟に制御できます。

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