JavaScript DOM - การเปลี่ยนแปลง Content ใน DOM

ในโลกของการพัฒนาเว็บ, JavaScript ถือเป็นเครื่องมือที่มีความสำคัญอย่างยิ่งในการสร้างเว็บอินเตอร์แอ็กทีฟที่ตอบสนองทันทีเมื่อมีการกระทำใดๆ จากผู้ใช้. คุณสมบัติหนึ่งที่ทำให้ JavaScript ทรงพลังสำหรับนักพัฒนาเว็บหลายๆ คน คือ ความสามารถในการจัดการกับ DOM หรือ Document Object Model.

DOM คืออะไร?

DOM ย่อมาจาก Document Object Model ซึ่งเป็นโครงสร้างที่ใช้ในการแสดงเนื้อหา HTML ของเว็บไซต์ในรูปแบบของต้นไม้ (tree-like structure) ที่เราสามารถเข้าถึงและแก้ไขได้ผ่าน JavaScript. แต่ละองค์ประกอบใน HTML จะถูกเปลี่ยนไปเป็นโหนด (node) ใน DOM ซึ่งสามารถมีลูก (child) และลักษณะ (attribute) เป็นของตัวเองได้.

การเปลี่ยนแปลง Content ใน DOM

การเปลี่ยนแปลงเนื้อหาใน DOM มีความยืดหยุ่นและสามารถทำได้หลายวิธี. มันสามารถเปลี่ยนแปลงได้ตั้งแต่การปรับเปลี่ยนข้อความธรรมดาไปจนถึงการเปลี่ยนโครงสร้างทั้งหมดของหน้า. นี่คือวิธีการที่ใช้บ่อยในการเปลี่ยนแปลง DOM ด้วย JavaScript:

1. `getElementById()` และการเปลี่ยนแปลง `innerHTML`

หนึ่งในวิธีที่ง่ายดายที่สุดคือการใช้ `getElementById()` เพื่อดึง element ที่ต้องการออกมาแล้วแก้ไขข้อความภายในโดยการใช้ `innerHTML`.

document.getElementById('myElement').innerHTML = 'Hello, EPT!';

โปรแกรมข้างต้นจะค้นหา element ที่มี id เป็น `myElement` และเปลี่ยนข้อความภายในเป็น "Hello, EPT!".

2. `querySelector()` สำหรับการเข้าถึงที่ยืดหยุ่นกว่า

`querySelector()` ช่วยให้คุณสามารถดึง element จาก DOM ได้ง่ายๆ โดยใช้ selector แบบ CSS ซึ่งทำให้สะดวกมากขึ้นเมื่อทำงานกับโครงสร้างที่ซับซ้อน.

document.querySelector('.myClass').innerText = 'Welcome to the world of JavaScript!';

วิธีนี้เหมาะสำหรับการดึง element ด้วย selector ที่มีความยืดหยุ่นเช่นชื่อคลาส หรือ element ที่อยู่ในโครงสร้างย่อยๆ.

3. การสร้างและเพิ่ม Element ใหม่

บางครั้งการแก้ไขเราต้องการที่จะเพิ่ม element ใหม่เข้าสู่ DOM ซึ่งสามารถทำได้โดยการใช้ `createElement()` และ `appendChild()`.

let newDiv = document.createElement('div');
newDiv.innerHTML = 'A brand new div!';
document.body.appendChild(newDiv);

โค้ดด้านบนจะสร้าง div ใหม่แล้วเพิ่มลงท้ายสุดของ body ของเอกสาร.

4. การลบ Element

ในบางกรณี เราอาจต้องการลบ element ออกจาก DOM. สิ่งนี้สามารถทำได้โดย `removeChild()` หรือใช้ `remove()` กับ Node ที่ต้องการ.

let elementToRemove = document.getElementById('removeMe');
elementToRemove.parentNode.removeChild(elementToRemove);
// หรือใช้
// elementToRemove.remove();

วิธีนี้จะช่วยให้สามารถลบ element ที่เราไม่ต้องการออกจาก DOM ได้อย่างสะดวก.

Use Case ที่ใช้ได้จริง

เพื่อแสดงว่าการจัดการ DOM สามารถทำอะไรได้มากมาย หนึ่งใน use case ที่พบได้บ่อยคือการสร้างและจัดการรายการ todo อย่างง่ายๆ:

<ul id="todoList">
    <li>Learn JavaScript</li>
    <li>Explore DOM Manipulation</li>
</ul>
<button onclick="addTodo()">Add New Todo</button>

<script>
function addTodo() {
    let todoList = document.getElementById('todoList');
    let newTodo = document.createElement('li');
    newTodo.innerText = 'New Task';
    todoList.appendChild(newTodo);
}
</script>

ในตัวอย่างนี้ การคลิกปุ่มจะสร้างรายการใหม่ และเพิ่มลงใน `ul` ของรายการ to-do โดยอัตโนมัติ.

ข้อสรุป

การเข้าใจและใช้ DOM อย่างมีประสิทธิภาพสามารถเปลี่ยนเว็บไซต์จากการเป็นเพียงแค่เอกสารหนึ่งกลายเป็นแอปพลิเคชันแบบ dynamic ที่ตอบสนองได้ทันทีในหลายๆ สถานการณ์. การจัดการและแก้ไข DOM ด้วย JavaScript จึงเป็นหนึ่งในทักษะสำคัญที่นักพัฒนาเว็บควรเชี่ยวชาญ.

สำหรับผู้ที่อยากเจาะลึกหรือคิดที่จะเริ่มต้นเรียนรู้ JavaScript และการจัดการ DOM อย่างจริงจัง EPT หรือ Expert-Programming-Tutor ก็เป็นสถานที่ที่น่าสนใจในการพัฒนาทักษะเหล่านี้. ด้วยหลักสูตรที่ครอบคลุมและผู้สอนที่มีความเชี่ยวชาญ คุณจะสามารถพัฒนาทักษะการเขียนโปรแกรมของคุณได้อย่างมั่นใจ.

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/