HTML DOM의 embeds 컬렉션은 HTML 문서 내 embeds[] 배열에 포함된 객체의 개수를 반환하는 데 사용됩니다. 컬렉션에 담긴 요소들은 HTML 문서에 나타나는 순서와 동일한 순서로 정렬됩니다.
속성(Properties)
embeds 컬렉션에서 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| length | 컬렉션에 포함된 <embed> 요소의 개수를 반환합니다. 이 속성 값은 읽기 전용이므로 변경할 수 없습니다. |
메서드(Methods)
embeds 컬렉션에서 사용할 수 있는 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| [index] | 지정된 인덱스에 해당하는 <embed> 요소를 반환합니다. 인덱싱은 0부터 시작하며, 범위를 벗어난 인덱스를 전달하면 null을 반환합니다. |
| item(index) | 지정된 인덱스에 해당하는 <embed> 요소를 반환합니다. 인덱싱은 0부터 시작하며, 범위를 벗어난 인덱스를 전달하면 null을 반환합니다. |
| namedItem(id) | 주어진 id와 연결된 <embed> 요소를 반환합니다. 해당 id가 존재하지 않으면 null을 반환합니다. |
문법(Syntax)
embeds 컬렉션의 기본 문법은 다음과 같습니다.
document.embeds
예제(Example)
HTML DOM embeds 컬렉션의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.EMB{
width:200px;
height:200px;
border:4px solid blue;
}
</style>
</head>
<body>
<h1>Embeds 컬렉션 예제</h1>
<p>아래 버튼을 클릭하면 이 문서에 포함된 embed 요소의 개수를 확인할 수 있습니다.</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 ="이 문서에 포함된 embed 요소의 개수는 " + e + "개입니다.";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET COUNT 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제에서 수행되는 동작을 단계별로 살펴보겠습니다.
1. embed 요소 생성 — 공통 클래스 속성 값을 기반으로 CSS 스타일이 적용된 두 개의 <embed> 요소를 생성했습니다.
.EMB{
width:200px;
height:200px;
border:4px solid blue;
}
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">2. 버튼 생성 — 사용자가 클릭하면 embedsNo() 함수가 실행되는 GET COUNT 버튼을 만들었습니다.
<button onclick="embedsNo()">GET COUNT</button>
3. 개수 계산 및 출력 — embedsNo() 함수는 document.embeds.length 값을 가져와 변수 e에 할당합니다. 문서에는 <embed> 요소가 두 개뿐이므로 embeds.length는 2를 반환합니다.
이후 id가 "Sample"인 단락 요소의 innerHTML 속성 값을 설정하여 결과 텍스트를 화면에 출력합니다.
function embedsNo() {
var e = document.embeds.length;
document.getElementById("Sample").innerHTML ="이 문서에 포함된 embed 요소의 개수는 " + e + "개입니다.";
}정리
HTML DOM의 embeds 컬렉션은 문서 내 모든 <embed> 요소에 접근할 수 있는 편리한 방법을 제공합니다. length 속성으로 요소 개수를 확인하고, [index], item(), namedItem() 메서드를 활용하면 특정 embed 요소를 손쉽게 조회할 수 있습니다.