JavaScript로 HTML 요소의 속성(href) 값을 변경하는 방법

JavaScript를 사용해 HTML 요소의 속성(attribute) 값을 변경하는 방법을 알아봅니다.

웹사이트에 앵커(anchor) 요소가 있고, href 속성 값에 잘못된 URL 링크 경로가 들어 있다고 가정해 보겠습니다.

이런 상황은 메뉴나 내비게이션 바에서 흔히 볼 수 있습니다.

<nav>
    <ul>
        <li>
            <a href="/path-to-your-page" id="some-id">Link</a>
        </li>
    </ul>
</nav>

내부 페이지 링크가 위치하는 또 다른 일반적인 곳은 웹사이트 하단의 푸터(footer) 영역입니다.

누군가 실수를 해서 href 값이 /contact-me로 되어 있는데, 원래는 /contact-us여야 한다고 생각해 보세요. 그런데 어떤 이유로든 HTML 코드에서 직접 수정할 수 없는 상황입니다(예를 들어 백엔드에 대한 쓰기 권한이 없는 경우).

방문자가 링크를 클릭했을 때 빈 페이지가 보이지 않도록 최대한 빨리 수정해야 합니다.

CMS(콘텐츠 관리 시스템) 등을 통해 프론트엔드 코드에 접근할 수 있다면, 백엔드는 전혀 건드리지 않고 JavaScript만으로 앵커 요소의 기존 href 값을 덮어쓸 수 있습니다.

아래에서 두 가지 방법을 소개합니다.

ID를 기준으로 요소 선택하기

HTML 마크업이 아래와 같고, 각 내비게이션 링크에 고유한 ID가 부여되어 있다고 가정해 보겠습니다.

<nav>
    <ul>
        <li>
            <a href="/" id="home">Home</a>
        </li>
        <li>
            <a href="/services" id="services">Services</a>
        </li>
        <li>
            <a href="/contact-me" id="contact">Contact</a>
        </li>
    </ul>
</nav>

이제 Contact 링크의 href 값을 변경하려고 합니다.

먼저 ID를 기준으로 앵커(링크) 요소를 선택합니다.

const contactLink = document.querySelector('#contact')

그다음 점 표기법(dot notation)으로 앵커 요소의 href 속성에 접근하고, 새 값인 /contact-us를 할당합니다.

contactLink.href = '/contact-us'

이게 전부입니다!

이제 콘솔에 출력해 보면, 기존의 잘못된 href 속성 값이 올바른 새 URL 경로로 교체된 것을 확인할 수 있습니다.

console.log(contactLink.href)
// 출력 결과: "https://your-domain.com/contact-us"

전체 JavaScript 코드:

// ID를 기준으로 앵커(링크) 요소 선택
const contactLink = document.querySelector('#contact')

// href 값 변경
contactLink.href = '/contact-us'

// 결과 출력
console.log(contactLink.href)

특정 문자열 값을 기준으로 요소 선택하기

상황에 따라 HTML 링크 요소에 고유한 id나 class가 없는 경우도 있습니다. 그럴 때 HTML 마크업은 다음과 같은 형태일 수 있습니다.

<nav>
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/services">Services</a>
        </li>
        <li>
            <a href="/contact-me">Contact</a>
        </li>
    </ul>
</nav>

걱정하지 마세요. CSS3 선택자를 querySelector()와 함께 사용하면 정확한 문자열 값, 즉 이 경우에는 /contact-me를 기준으로 요소를 지정해 선택할 수 있습니다.

방법은 다음과 같습니다.

const contactLink = document.querySelector('a[href*="/contact-me"]')

이제 변수의 href 값을 출력해서, 찾으려던 href 값이 실제로 맞는지 확인해 보세요.

console.log(contactLink.href)
// 출력 결과: "https://your-domain.com/contact-me"

맞습니다! 이제 앞선 예제처럼 href 값을 올바른 URL 경로로 변경하면 됩니다.

contactLink.href = '/contact-us'

전체 코드:

// 특정 href 문자열 값을 가진 링크 선택
const contactLink = document.querySelector('a[href*="/contact-me"]')

// href 문자열 값 변경
contactLink.href = '/contact-us'

// 결과 출력
console.log(contactLink.href)

참고: a[href*="/contact-me"] 선택자에서 별표(*)는 '포함한다'는 의미입니다. 즉, href 속성 값 안에 해당 문자열이 포함된 모든 앵커 요소를 대상으로 합니다. 만약 href 값이 정확히 일치하는 경우에만 선택하고 싶다면 a[href="/contact-me"]처럼 별표 없이 작성하면 됩니다.