html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

<ul class="nav">

    <li class="active">列 1</li>

    <li>列 2</li>

    <li>列 3</li>

</ul>

<script type="text/javascript">

    // 現在の li 要素を取得します。let activeLi = document.querySelector(".active");

    // classList 属性を印刷 console.log(activeLi.classList)

    // コンソール出力:

    // DOMTokenList ['active', 値: 'active']

</スクリプト>

<ul class="nav">

    <li class="item active">列 1</li>

    <li class="item">列 2</li>

    <li class="item">列 3</li>

</ul>

 

<script type="text/javascript">

    currentElement を document.querySelector(".nav").firstElementChild とします。

    // li 要素をトラバースし、クリック イベントを設定します while (currentElement) {

        currentElement.onclick = 関数() {

            // アクティブなliを削除する

            document.querySelector(".active").classList.remove("active");

            // 現在のliクラスはアクティブな

            this.classList.add("アクティブ");

        }

        currentElement = currentElement.nextElementSibling;

    }

</スクリプト>