지도 영역 컬렉션
예시
특정 이미지 맵에 몇 개의 <area> 요소가 있는지 알아보십시오.
var x = document.getElementById("planetmap").areas.length;
x 의 결과 는 다음과 같습니다.
3
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
영역 컬렉션은 이미지 맵의 모든 <area> 요소 컬렉션을 반환합니다.
참고: 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다.
팁: href 속성이 지정된 모든 <area> 요소의 컬렉션을 반환하려면 링크 컬렉션을 사용하세요.
브라우저 지원
| Collection | |||||
|---|---|---|---|---|---|
| areas | Yes | Yes | Yes | Yes | Yes |
통사론
mapObject.areas
속성
| Property | Description |
|---|---|
| length | Returns the number of <area> elements in the collection. Note: This property is read-only |
행동 양식
| Method | Description |
|---|---|
| [index] | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| item(index) | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| namedItem(id) | Returns the <area> element from the collection with the specified id. Note: Returns null if the id does not exist |
기술적 세부 사항
| DOM 버전: | 핵심 수준 2 문서 개체 |
|---|---|
| 반환 값: | 문서의 이미지 맵에 있는 모든 <area> 요소를 나타내는 HTMLCollection 개체입니다. 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다. |
더 많은 예
예시
[ 인덱스 ]
이미지 맵에서 첫 번째 <area> 요소의 URL을 가져옵니다.
var x = document.getElementById("planetmap").areas[0].href;
x 의 결과 는 다음과 같습니다.
https://www.w3schools.com/jsref/sun.htm
예시
항목( 인덱스 )
이미지 맵에서 첫 번째 <area> 요소의 URL을 가져옵니다.
var x = document.getElementById("planetmap").areas.item(0).href;
x 의 결과 는 다음과 같습니다.
https://www.w3schools.com/jsref/sun.htm
예시
명명된 항목( 아이디 )
이미지 맵에서 id="myArea"인 <area> 요소의 URL을 가져옵니다.
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
x 의 결과 는 다음과 같습니다.
https://www.w3schools.com/jsref/mercur.htm
예시
이미지 맵의 모든 <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>";
}
txt 의 결과 는 다음과 같습니다.
rect
circle
circle
❮ 지도 개체