Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM li 개체

<시간/>

HTML의 HTML DOM Li 개체는

  • 를 나타냅니다. 요소.

    구문

    다음은 구문입니다 -

  • 만들기 요소

    var liObject = document.createElement(“LI”)

    속성

    여기, "LiObject" 다음 속성을 가질 수 있습니다 -

    속성
    설명

  • 요소의 값 속성 값을 반환/설정합니다.
  • 예시

    Li 값의 예를 살펴보겠습니다. 속성 -

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

    'Alex Cheated'를 클릭한 후 버튼 -

    HTML DOM li 개체