JavaScript로 웹 페이지의 모든 링크를 찾는 방법

이 글에서는 웹사이트에 있는 모든 링크를 가져와서 브라우저 콘솔에 출력하는 방법을 알아봅니다. 몇 줄의 간단한 JavaScript 코드면 누구나 쉽게 따라 할 수 있습니다.

코드

var links = document.querySelectorAll("a");

for (var i = 0; i < links.length; i++) {
  var link = links[i].getAttribute("href");
  console.log(link);
}

이 코드는 먼저 document.querySelectorAll("a")를 사용해 문서 내의 모든 <a>(앵커) 요소를 선택합니다. 그다음 반복문을 돌면서 각 요소에서 href 속성 값을 읽어 콘솔에 하나씩 출력합니다.

브라우저 개발자 도구(F12 또는 우클릭 후 '검사' → Console 탭)를 열고 위 코드를 붙여 넣으면, 현재 페이지의 모든 링크 주소를 바로 확인할 수 있습니다.

특정 영역의 링크만 가져오기

팁: 웹 페이지 전체가 아니라 특정 컨테이너(예: 기사 본문) 안의 링크만 가져오고 싶다면, 선택자를 더 구체적으로 지정하면 됩니다. 예를 들어 링크를 추출하려는 아티클 요소의 클래스가 .article이라면 다음과 같이 작성할 수 있습니다.

var articleLinks = document.querySelectorAll(".article a");

이 선택자는 훨씬 더 정확하게 동작합니다. 클래스가 .article인 부모 요소 내부에 있는 a 앵커 요소만 대상으로 삼기 때문에, 헤더·푸터·사이드바 등 불필요한 영역의 링크는 제외됩니다.