Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng HTML DOM li

Đối tượng HTML DOM Li trong HTML đại diện cho

  • phần tử.

    Cú pháp

    Sau đây là cú pháp -

    Tạo

  • phần tử

    var liObject = document.createElement(“LI”)

    Thuộc tính

    Đây, “LiObject” có thể có các thuộc tính sau -

    Giá trị
    Thuộc tính
    Mô tả

    Nó trả về / đặt giá trị của thuộc tính value của phần tử

  • Ví dụ

    Hãy để chúng tôi xem một ví dụ về giá trị Li tài sản -

    <!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>

    Đầu ra

    Điều này sẽ tạo ra kết quả sau -

    Trước khi nhấp vào ‘Alex Cheated’ nút -

    Đối tượng HTML DOM li

    Sau khi nhấp vào ‘Alex Cheated’ nút -

    Đối tượng HTML DOM li