HTML DOM 임베드 컬렉션

<시간/>

HTML DOMembeds 컬렉션은 HTML 문서의 embeds [] 배열에 있는 개체 수를 반환하는 데 사용됩니다. 컬렉션의 요소는 HTML 문서에 나타나는 것과 동일한 순서로 표시됩니다.

속성

다음은 Embed 컬렉션의 속성입니다 -

속성	설명
길이	컬렉션에 있는 요소의 수를 반환합니다. 이 속성 값은 읽기 전용이므로 변경할 수 없습니다.

방법

다음은 Embed 컬렉션을 위한 방법입니다 -

메소드	설명
[색인]	주어진 인덱스를 사용하여 컬렉션의 요소를 반환합니다. 인덱싱은 0에서 시작하고 인덱스 번호가 범위를 벗어나면 null을 반환합니다.
항목(색인)	주어진 인덱스가 있는 컬렉션에서 요소를 반환합니다. 인덱싱은 0에서 시작하고 인덱스 번호가 범위를 벗어나면 null을 반환합니다.
이름이 지정된 항목	주어진 ID가 연관된 컬렉션에서 요소를 반환합니다. 주어진 id가 존재하지 않으면 Null이 반환됩니다.

구문

다음은 포함 컬렉션의 구문입니다. -

document.embeds

예시

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

<!DOCTYPE html>
<html>
<head>
<style>
   .EMB{
      width:200px;
      height:200px;
      border:4px solid blue;
   }
</style>
</head>
<body>
<h1>Embeds collection example</h1>
<p>Get the number of embeds element in this document by clicking the below button.</p>
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">
<br><br>
<button onclick="embedsNo()">GET COUNT</button>
<p id="Sample"></p>
<script>
   function embedsNo() {
      var e = document.embeds.length;
      document.getElementById("Sample").innerHTML ="The number of embed elements in this document are " + e;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 임베드 컬렉션

GET COUNT 버튼 클릭 시 -

HTML DOM 임베드 컬렉션

위의 예에서 -

공통 클래스 속성 값을 기반으로 CSS 스타일이 적용된 두 개의 포함 요소를 만들었습니다.

.EMB{
   width:200px;
   height:200px;
   border:4px solid blue;
}
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">

그런 다음 사용자가 클릭할 때 embedsNo() 메서드를 실행하는 GET COUNT 버튼을 만들었습니다.

<button onclick="embedsNo()">GET COUNT</button>

embedsNo() 메서드는 embeds.length 속성 값을 가져와 변수 e에 할당합니다. 문서에는 두 개의 요소만 있기 때문에 embeds.length는 2를 반환합니다.

그런 다음 이 값은 id가 "Sample"인 단락에 표시되고 innerHTML 속성 값을 의도한 텍스트로 설정합니다 -

function embedsNo() {
   var e = document.embeds.length;
   document.getElementById("Sample").innerHTML ="The number of embed elements it this document are " + e;
}