JavaScript로 HTML 속성 값을 변경하는 방법

JavaScript로 HTML 요소 속성 값을 변경하는 방법을 알아보세요.

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

메뉴/탐색 표시줄에서 흔히 볼 수 있는 항목:

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

내부 웹 페이지 링크가 있는 또 다른 일반적인 장소는 웹사이트 하단의 바닥글입니다.

누군가가 실수를 했다고 가정해 봅시다. 귀하의 href 값은 /contact-me입니다. 하지만 /contact-us여야 합니다. , 어떤 이유로든 HTML 코드에서 직접 해결할 수 없습니다(백엔드에서 쓰기 액세스 권한이 없을 수도 있음).

방문자가 클릭할 때 빈 페이지가 표시되지 않도록 최대한 빨리 수정해야 합니다.

프론트엔드 코드에 대한 액세스 권한이 있는 경우 CMS(콘텐츠 관리 시스템)를 통해 백엔드를 전혀 건드리지 않고 JavaScript를 사용하여 앵커 요소의 기존 href 값을 재정의할 수 있습니다.

두 가지 다른 방법을 보여 드리겠습니다.

ID 기반 요소 선택

각 탐색 링크에 고유 ID가 있는 HTML 마크업이 다음과 같다고 가정해 보겠습니다.

<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>

이제 연락처 링크에서 href 값을 변경하려고 합니다.

먼저 ID를 기반으로 앵커/링크 요소를 선택합니다.

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

그런 다음 점 표기법을 사용하여 href를 선택합니다. 앵커 요소의 속성을 지정하고 /contact-us의 새 값을 지정합니다. :

contactLink.href === '/contact-us'

그게 다야!

이제 콘솔에 기록하면 이전의 잘못된 href 속성 값이 새로운 올바른 URL 경로로 대체되었음을 알 수 있습니다.

console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"

모든 JS 코드:

// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')

// Change href value
contactLink.href === '/contact-us'

// Print result
console.log(contactLink.href)

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

HTML 링크 요소에 고유 ID 또는 클래스가 없는 상황에 있을 수 있습니다. 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>

문제 없어요. querySelector()와 함께 CSS3 선택기를 사용할 수 있습니다. 정확한 문자열 값을 선택하도록 지정합니다(이 경우 /contact-me). .

방법은 다음과 같습니다.

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

이제 변수에서 href 값을 인쇄하여 찾고 있던 href 값을 실제로 찾았는지 확인하십시오.

console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" 

그게했다!

이제 href를 변경할 수 있습니다. 이전 예와 같이 올바른 URL 경로에 대한 값:

contactLink.href === '/contact-us'

모든 코드:

// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')

// Change href string value
contactLink.href = '/contact-us'

// Print result
console.log(contactLink.href)