Map areas 집합

HTML DOM Map 객체

정의와 사용법

area 집합이 이미지 맵 내에 모든 <area> 요소 의 집합.

비고：집합의 요소는 원본 코드에서 등장한 순서로 정렬됩니다。

알림:모든 설정된 href 속성의 <area> 요소 의 집합을 사용하십시오 links 집합。

실례

예제 1

지정된 이미지 맵에서 <area> 요소의 개수를 파악합니다：

var x = document.getElementById("planetmap").areas.length;

직접 시도해 보세요

x의 결과는 다음과 같습니다：

3

페이지 아래에 더 많은 TIY 예제가 있습니다。

문법

mapObject.areas

속성

값 설명
length

집합에서 <area> 요소의 개수를 반환합니다。

비고：이 속성은 읽기 전용입니다

메서드

메서드 설명
[index]

지정된 인덱스를 가진 <area> 요소를 반환합니다（0부터 시작）。

비고：인덱스 번호가 범위를 벗어나면 null을 반환합니다。
item(index)

지정된 인덱스를 가진 <area> 요소를 반환합니다（0부터 시작）。

비고：인덱스 번호가 범위를 벗어나면 null을 반환합니다。
namedItem(id)

지정된 id를 가진 <area> 요소를 가진 집합을 반환합니다。

비고：id가 존재하지 않으면 null을 반환합니다。

기술 세부 사항

DOM 버전： Core Level 2 Document Object
반환 값：

HTMLCollection 객체는 문서의 이미지 맵에 있는 모든 <area> 요소를 나타냅니다。

집합의 요소는 원본 코드에서 등장한 순서로 정렬됩니다。

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

더 많은 예제

예제 2: [index]

이미지 맵에서 첫 번째 <area> 요소의 URL을 가져옵니다：

var x = document.getElementById("planetmap").areas[0].href;

직접 시도해 보세요

x의 결과는 다음과 같을 것입니다：

https://www.codew3c.com/jsref/sun.html

예제 3: item(index)

이미지 맵에서 첫 번째 <area> 요소의 URL을 가져옵니다：

var x = document.getElementById("planetmap").areas.item(0).href;

직접 시도해 보세요

x의 결과는 다음과 같을 것입니다：

https://www.codew3c.com/jsref/sun.html

예제 4: namedItem(id)

이미지 맵에서 id="myArea"의 <area> 요소의 URL을 가져옵니다：

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

직접 시도해 보세요

x의 결과는 다음과 같을 것입니다：

https://www.codew3c.com/jsref/mercur.html

예제 5

이미지 맵의 모든 <area> 요소를 순회하며 각区域的 형태를 출력합니다：

var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
  txt = txt + x.areas[i].shape + "<br>";
}

직접 시도해 보세요

x의 결과는 다음과 같을 것입니다：

rect
circle
circle

HTML DOM Map 객체