การเปลี่ยนแปลงเนื้อหา ใน Html Dom

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

#javascript

#Dom_javascript

การเปลี่ยนแปลงเนื้อหา HTML โดยใช้ HTML DOM

การเปลี่ยนแปลงเนื้อหาใน HTML โดยใช้ HTML DOM (Document Object Model) โดยหลัก ๆ แล้วจะทำผ่าน JavaScript โดยการเข้าถึงองค์ประกอบ (element) ที่ต้องการและแก้ไขคุณสมบัติ (properties) ของมัน นี่คือวิธีที่ใช้บ่อยที่สุด:

1. การเปลี่ยนเนื้อหาข้อความ (Text Content)

ใช้คุณสมบัติ .textContent หรือ .innerText เพื่อเปลี่ยนข้อความภายในองค์ประกอบ HTML:

.textContent: ตั้งค่าหรือส่งคืนเนื้อหาข้อความขององค์ประกอบและผู้สืบทอด (descendants) ทั้งหมด โดยไม่สนใจการจัดรูปแบบ HTML (เช่น แท็ก <br>)

.innerText: ตั้งค่าหรือส่งคืนเนื้อหาข้อความที่ "มองเห็นได้" ขององค์ประกอบ โดยจะคำนึงถึงการจัดรูปแบบ CSS (เช่น จะไม่รวมข้อความที่ถูกซ่อนโดย display: none;)

ตัวอย่าง:

HTML

<p id="myParagraph">ข้อความเดิม</p>

<script>

// เลือกองค์ประกอบ <p> ด้วย id

const pElement = document.getElementById("myParagraph");

// เปลี่ยนเนื้อหาข้อความ

pElement.textContent = "ข้อความใหม่ที่ถูกเปลี่ยนโดย DOM";

// หรือ pElement.innerText = "ข้อความใหม่ที่ถูกเปลี่ยนโดย DOM";

</script>

2. การเปลี่ยนเนื้อหา HTML (HTML Content)

ใช้คุณสมบัติ .innerHTML เพื่อเปลี่ยนเนื้อหา HTML ทั้งหมดภายในองค์ประกอบ ซึ่งสามารถรวมถึงแท็ก HTML อื่นๆ ได้:

ตัวอย่าง:

HTML

<div id="myDiv">

<p>เนื้อหาเดิม</p>

</div>

<script>

// เลือกองค์ประกอบ <div> ด้วย id

const divElement = document.getElementById("myDiv");

// เปลี่ยนเนื้อหาเป็น HTML ใหม่ (รวมแท็ก <strong> และ <em>)

divElement.innerHTML = "<h2>หัวข้อใหม่</h2><p><strong>ข้อความที่ถูก <em>เน้น</em></strong></p>";

</script>

ข้อควรระวัง: การใช้ .innerHTML กับข้อมูลที่มาจากผู้ใช้ที่ไม่น่าเชื่อถืออาจทำให้เกิดช่องโหว่ XSS (Cross-Site Scripting) ได้ ควรใช้ .textContent เมื่อต้องการเปลี่ยนเพียงแค่ข้อความเท่านั้น เพื่อความปลอดภัย

3. การเปลี่ยนคุณสมบัติ (Attributes) ขององค์ประกอบ

ใช้เมธอด .setAttribute() หรือการเข้าถึงคุณสมบัติโดยตรงเพื่อเปลี่ยนค่าของแอตทริบิวต์:

ตัวอย่าง:

HTML

<img id="myImage" src="old_image.jpg" alt="ภาพเดิม">

<script>

const imgElement = document.getElementById("myImage");

// 1. เปลี่ยนแอตทริบิวต์ 'src' โดยตรง

imgElement.src = "new_image.png";

// 2. เปลี่ยนแอตทริบิวต์ 'alt' โดยใช้ setAttribute

imgElement.setAttribute("alt", "ภาพใหม่");

// 3. เปลี่ยนแอตทริบิวต์ 'class'

imgElement.className = "active-state";

</script>

สรุปขั้นตอนการเปลี่ยนแปลงเนื้อหา:

ค้นหา (Find): ใช้เมธอด DOM เช่น document.getElementById(), document.querySelector(), document.getElementsByClassName() เพื่อเลือกองค์ประกอบเป้าหมาย

เปลี่ยนแปลง (Change): ใช้คุณสมบัติต่าง ๆ เช่น .textContent, .innerHTML, .src, .setAttribute() เพื่อแก้ไขเนื้อหาหรือคุณสมบัติขององค์ประกอบที่เลือก