HTML DOM 양식 컬렉션-HTML 튜토리얼-php.cn

HTML DOM 양식 컬렉션

WBOY

풀어 주다： 2023-09-01 14:49:01

앞으로

709명이 탐색했습니다.

HTML DOM 양식 컬렉션은 HTML 문서에 있는 모든 양식 요소를 컬렉션으로 반환하는 데 사용됩니다. 컬렉션의 요소는 HTML 문서에 나타나는 순서대로 정렬되어 표시됩니다.

속성

다음은 양식 컬렉션의 속성입니다. -

속성	설명
length	컬렉션에 있는 요소 수를 반환하는 읽기 전용 속성입니다.

메소드

다음은 양식 수집 메소드입니다.

메소드	설명
[index]	컬렉션에서 요소를 반환합니다. 주어진 인덱스 인덱스는 0부터 시작하고 인덱스가 범위를 벗어나면 null을 반환합니다.
item(index)	주어진 인덱스에서 수집합니다. 인덱스는 0부터 시작하고 인덱스가 범위를 벗어나면 null을 반환합니다.
namedItem(id)	주어진 ID를 가진 컬렉션에서. id가 존재하지 않으면 Null을 반환합니다.

구문

다음은 HTML DOM 양식 컬렉션의 구문입니다. - p>

document.forms

로그인 후 복사

예

HTML DOM 양식 컬렉션의 예를 살펴보겠습니다. -

라이브 데모

<!DOCTYPE html>
<html>
<head>
<script>
   function formCollect() {
      for(var i=0;i<document.forms.length;i++){
         var no=document.forms[i].id+"<br>";
         document.getElementById("Sample").innerHTML +=no;
      }
   }
</script>
</head>
<body>
<h1>Forms collection example</h1>
<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango">
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22">
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>
<br>
<button onclick="formCollect()">GET IDS</button>
<p id="Sample">Following are the form ids <br></p>
</body>
</html>

로그인 후 복사

출력

이렇게 하면 다음과 같은 출력이 생성됩니다. -

HTML DOM表单集合

"Get IDS" 버튼을 클릭한 경우 -

HTML DOM表单集合

위의 예에서는 -

먼저 "FORM1", "FORM2", "FORM3"의 ID로 3개의 Form을 생성했습니다. 처음 두 양식에는 텍스트 유형의 입력 요소가 있고 세 번째 양식에는 비밀번호 유형의 입력 요소가 있습니다. -

<form id="FORM1">
Fruit <input type="text" name="fname" value="Mango" >
</form>
<form id="FORM2">
Age <input type="text" name="Age" value="22" >
</form>
<form id="FORM3">
Password: <input type="password" name="pass" value="test">
</form>

로그인 후 복사

GET IDS 버튼은 사용자가 클릭할 때 formCollect() 메서드를 실행합니다. -

<button onclick="formCollect()">GET IDS</button>

로그인 후 복사

formCollect() 메서드는 document.forms 길이를 가져옵니다. 속성 값(이 경우 3)을 for 루프 내부의 테스트 표현식에 사용합니다. 양식 컬렉션의 색인 번호를 사용하여 해당 ID를 가져와 표시용 ID가 "Sample"인 단락에 추가합니다 -

function formCollect() {
   for(var i=0;i<document.forms.length;i++){
      var no=document.forms[i].id+"<br>";
      document.getElementById("Sample").innerHTML +=no;
   }
}

로그인 후 복사

위 내용은 HTML DOM 양식 컬렉션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!