การเข้าถึง Html Element /javascript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#การเข้าถึงhtmlElement

การอ้างอิง HTML Element ใน JavaScript เป็นขั้นตอนพื้นฐานในการจัดการและปรับเปลี่ยนเนื้อหา โครงสร้าง และรูปแบบของหน้าเว็บ (DOM Manipulation) วิธีที่ใช้บ่อยที่สุดมีดังนี้ครับ:

วิธีการอ้างอิง HTML Element ใน JavaScript

มีหลายเมธอดหลักๆ ในออบเจกต์ document ที่ใช้ในการเลือก Element:

1. เลือกจาก ID (id)

นี่เป็นวิธีที่ตรงไปตรงมาที่สุดและควรใช้เมื่อต้องการเลือก Element เดียวที่กำหนด id ที่ไม่ซ้ำกัน:

เมธอด: document.getElementById('elementId')

ผลลัพธ์: ส่งกลับ Element เดียว หรือ null ถ้าไม่พบ

ตัวอย่าง:

JavaScript

const myDiv = document.getElementById('main-content');

// myDiv จะอ้างอิงถึง <div id="main-content">...</div>

2. เลือกจาก Class (class)

ใช้เมื่อต้องการเลือก Element ทั้งหมดที่มีชื่อ class ที่ระบุ:

เมธอด: document.getElementsByClassName('className')

ผลลัพธ์: ส่งกลับ HTMLCollection ของ Element ทั้งหมดที่ตรงกัน (คล้ายอาร์เรย์ แต่ไม่ใช่)

ตัวอย่าง:

JavaScript

const items = document.getElementsByClassName('list-item');

// items จะเป็น Collection ของ <li> ที่มี class="list-item"

3. เลือกจาก Tag Name

ใช้เมื่อต้องการเลือก Element ทั้งหมดที่มีชื่อ Tag ที่ระบุ (เช่น div, p, a, button):

เมธอด: document.getElementsByTagName('tagName')

ผลลัพธ์: ส่งกลับ HTMLCollection ของ Element ทั้งหมดที่ตรงกัน

ตัวอย่าง:

JavaScript

const paragraphs = document.getElementsByTagName('p');

// paragraphs จะเป็น Collection ของ <p> ทั้งหมดในหน้า

4. เลือกโดยใช้ CSS Selector (Query Selector)

นี่เป็นวิธีการที่ยืดหยุ่นและเป็นที่นิยมที่สุดในปัจจุบัน เพราะสามารถใช้ CSS Selector ที่ซับซ้อนได้:

A. เลือก Element แรกที่ตรงกัน

เมธอด: document.querySelector('selector')

ผลลัพธ์: ส่งกลับ Element ตัวแรก ที่ตรงกับ Selector หรือ null ถ้าไม่พบ

ตัวอย่าง:

JavaScript

// เลือก Element แรกที่มี class เป็น 'active'

const activeElement = document.querySelector('.active');

// เลือกปุ่มที่มี ID เป็น 'submit-btn'

const submitButton = document.querySelector('#submit -btn');

// เลือก <p> ที่อยู่ภายใน <div>

const firstNestedP = document.querySelector('div > p');

B. เลือก Element ทั้งหมดที่ตรงกัน

เมธอด: document.querySelectorAll('selector')

ผลลัพธ์: ส่งกลับ NodeList ของ Element ทั้งหมดที่ตรงกับ Selector (คล้ายอาร์เรย์และสามารถใช้เมธอดเช่น forEach() ได้โดยตรง)

ตัวอย่าง:

JavaScript

// เลือก <a> ทั้งหมดที่มี attribute target="_blank"

const externalLinks = document.querySelectorAll('a[target="_blank"]');

// เลือก Element ทั้งหมดที่มี class เป็น 'highlight' และมี tag เป็น 'span'

const highlightedSpans = document.querySelectorAll('span.highlight');

สรุปการใช้งานที่แนะนำ

สถานการณ์ เมธอดที่แนะนำ เหตุผล

เลือก Element เดียว ด้วย ID document.getElementById() เร็วที่สุดและตรงประเด็นสำหรับ ID

เลือก Element เดียว ด้วย Selector ที่ซับซ้อน document.querySelector() ยืดหยุ่นที่สุดสำหรับ Selector ทั่วไป

เลือก หลาย Element ด้วย Class หรือ Selector อื่นๆ document.querySelectorAll() ใช้ CSS Selector ได้เต็มที่และส่งคืน NodeList ที่ใช้งานง่ายกว่า HTMLCollection