area 요소의 href 속성에 포함된 쿼리 문자열(querystring)을 가져오려면 search 속성을 사용하면 됩니다. search 속성은 URL에서 물음표(?) 뒤에 오는 쿼리 문자열 부분을 그대로 반환하며, 별도의 문자열 파싱 없이 간편하게 값을 얻을 수 있습니다.
아래 예제 코드를 실행하면 이미지 맵(map) 안에 정의된 area 태그의 href 값에서 쿼리 문자열을 추출하여 화면에 출력합니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
<map name = "html">
<area id = "myarea" shape = "circle" coords = "154,150,59" href = "about.htm?id=company" alt = "Team" target = "_self" >
</map>
<script>
var x = document.getElementById("myarea").search;
document.write("<br>Querystring: "+x);
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 쿼리 문자열이 출력됩니다.
?id=company
코드 설명
<img>태그의usemap속성으로 이미지 맵을 연결하고,<map>내부에 원형(circle) 형태의 클릭 영역인<area>태그를 정의합니다.area태그의 href 값은about.htm?id=company로 설정되어 있습니다.- JavaScript에서
document.getElementById("myarea").search를 호출하면 href 값 중?id=company라는 쿼리 문자열 부분만 반환됩니다.
참고로 search 속성은 물음표(?)를 포함한 전체 쿼리 문자열을 반환하며, 물음표를 제외한 순수한 파라미터 값이 필요하다면 substring(1) 또는 URLSearchParams 객체를 활용해 추가로 가공할 수 있습니다.