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

HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。

Ol要素の作成方法

JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。

var olObject = document.createElement("OL")

ここで作成した「olObject」は、以下のプロパティを持っています。

プロパティ説明
reversedリストの順序を降順にするか、昇順（デフォルト）にするかを設定・取得します
start順序付きリストのstart属性の値（開始番号）を設定・取得します
type順序付きリストのtype属性の値（番号の種類）を設定・取得します

startプロパティの使用例

ここでは、Olオブジェクトのstartプロパティを使った具体的な例を見てみましょう。このサンプルでは、開始番号が「2」に設定された順序付きリストを、ボタンをクリックすることで「1」に修正します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol start</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-Ol-start</legend>
            <h3>Students</h3>
            <ol id="orderList" start='2'>
                <li>Zampa</li>
                <li>Rajesh</li>
                <li>Eden</li>
                <li>Bina</li>
                <li>Alex</li>
                <li>Adam</li>
            </ol>
            <input type="button" onclick="reverseNumbering()" value="Correct list">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementById("orderList");
    function reverseNumbering() {
        studentList.start = '1';
        divDisplay.textContent = 'List Corrected';
    }
</script>
</body>
</html>

実行結果

「Correct list（リストを修正）」ボタンをクリックする前の表示は以下の通りです。リストの開始番号が「2」から始まっていることが確認できます。

HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

「Correct list」ボタンをクリックした後は、startプロパティが「1」に変更され、リストの番号が正しく振り直されます。

HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

このように、HTML DOMのOlオブジェクトを活用すれば、順序付きリストの開始番号をユーザーの操作に応じて動的に変更することが可能です。reversedプロパティやtypeプロパティと組み合わせれば、より柔軟なリスト表示の制御が実現できます。

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