다음은 JavaScript를 사용하여 웹 페이지에 있는 모든 링크의 좌표(가로·세로 크기)를 찾는 방법을 보여주는 예제 코드입니다. 이 기법은 링크 위치 분석, 자동화 테스트, UI 디버깅 등 다양한 상황에서 유용하게 활용할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Coordinates of every link in a page</h1>
<div style="color: green;" class="result"></div>
<a href="www.google.com">google.com</a>
<a href="www.facebook.com">facebook.com</a>
<a href="www.yahoo.com">yahoo.com</a>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to display the link coordinates
</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let links = document.getElementsByTagName("a");
BtnEle.addEventListener("click", () => {
for (let i of links) {
console.log(i);
resEle.innerHTML +=
"X axis = " +
i.offsetWidth +
" Y axis = " +
i.offsetHeight +
"<br>";
}
});
</script>
</body>
</html>
코드 설명
이 코드의 핵심 동작 원리는 다음과 같습니다.
- document.getElementsByTagName("a"): 문서 내 모든 <a>(앵커) 태그를 컬렉션 형태로 가져옵니다.
- addEventListener("click", ...): 버튼 클릭 이벤트가 발생했을 때 지정한 함수가 실행되도록 등록합니다.
- for...of 반복문: 가져온 링크 컬렉션을 하나씩 순회하며 각 요소에 접근합니다.
- offsetWidth / offsetHeight: 각 링크 요소의 실제 가로 크기(X축)와 세로 크기(Y축)를 픽셀 단위로 반환합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 페이지에 존재하는 각 링크의 X축(너비)과 Y축(높이) 값이 초록색 영역에 순서대로 출력됩니다.
