วิธีการเปลี่ยนค่าแอตทริบิวต์ HTML ด้วย JavaScript

เรียนรู้วิธีเปลี่ยนค่าแอตทริบิวต์องค์ประกอบ HTML ด้วย JavaScript

สมมติว่าคุณมีองค์ประกอบจุดยึดบนเว็บไซต์ที่มีเส้นทางลิงก์ URL ที่ผิดพลาดใน href ค่าแอตทริบิวต์

ที่พบเห็นได้ทั่วไปในเมนู/แถบนำทางของคุณ:

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

ที่ทั่วไปอีกแห่งที่มีลิงก์ของหน้าเว็บภายในอยู่ที่ส่วนท้ายที่ด้านล่างของเว็บไซต์ของคุณ

สมมติว่ามีคนทำผิดพลาด hrefของคุณ 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>

ตอนนี้ เราต้องการเปลี่ยนค่า href บนลิงค์ผู้ติดต่อ

ขั้นแรก เลือกองค์ประกอบสมอ/ลิงก์ตามรหัส:

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 ของคุณไม่มีรหัสหรือคลาสที่ไม่ซ้ำกัน มาร์กอัป 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)
// 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)