โหนด JavaScript DOM

สารบัญ

การเพิ่มและการลบโหนด (องค์ประกอบ HTML)

การสร้างองค์ประกอบ HTML ใหม่ (โหนด)

ในการเพิ่มองค์ประกอบใหม่ให้กับ HTML DOM คุณต้องสร้างองค์ประกอบ (โหนดองค์ประกอบ) ก่อน แล้วผนวกเข้ากับองค์ประกอบที่มีอยู่

ตัวอย่าง

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

ตัวอย่างอธิบาย

รหัสนี้สร้างใหม่ <p> องค์ประกอบ:

const para = document.createElement("p");

หากต้องการเพิ่มข้อความลงในองค์ประกอบ <p> คุณต้องสร้างโหนดข้อความก่อน รหัสนี้สร้างโหนดข้อความ:

const node = document.createTextNode("This is a new paragraph.");

จากนั้นคุณจะต้องผนวกโหนดข้อความเข้ากับองค์ประกอบ <p>:

para.appendChild(node);

สุดท้ายคุณต้องผนวกองค์ประกอบใหม่เข้ากับองค์ประกอบที่มีอยู่

รหัสนี้ค้นหาองค์ประกอบที่มีอยู่:

const element = document.getElementById("div1");

รหัสนี้จะเพิ่มองค์ประกอบใหม่ให้กับองค์ประกอบที่มีอยู่:

element.appendChild(para);

การสร้างองค์ประกอบ HTML ใหม่ - insertBefore()

appendChild() วิธีการในตัวอย่างก่อนหน้านี้ ผนวกองค์ประกอบใหม่เป็น ลูกคนสุดท้ายของผู้ปกครอง

หากคุณไม่ต้องการให้ใช้เมธอด insertBefore():

ตัวอย่าง

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

การลบองค์ประกอบ HTML ที่มีอยู่

หากต้องการลบองค์ประกอบ HTML ให้ใช้ remove() วิธี:

ตัวอย่าง

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

ตัวอย่างอธิบาย

เอกสาร HTML ประกอบด้วย <div> องค์ประกอบที่มีสองโหนดย่อย (สอง <p> องค์ประกอบ):

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

ค้นหาองค์ประกอบที่คุณต้องการลบ:

const elmnt = document.getElementById("p1");

จากนั้นดำเนินการเมธอด Remove() กับองค์ประกอบนั้น:

elmnt.remove();

เมธอด remove() ใช้ไม่ได้ เบราว์เซอร์รุ่นเก่า โปรดดูตัวอย่างด้านล่างเกี่ยวกับวิธีใช้ RemoveChild() แทน

การลบโหนดลูก

สำหรับเบราว์เซอร์ที่ไม่รองรับเมธอด remove() คุณจะต้องค้นหา โหนดหลักเพื่อลบองค์ประกอบ:

ตัวอย่าง

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

ตัวอย่างอธิบาย

เอกสาร HTML นี้มีองค์ประกอบ <div> ที่มีโหนดลูกสองโหนด (สอง <p> องค์ประกอบ):

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

ค้นหาองค์ประกอบที่มี id="div1":

const parent = document.getElementById("div1");

ค้นหา <p> องค์ประกอบที่มี id="p1":

const child = document.getElementById("p1");

ลบเด็กออกจากผู้ปกครอง:

parent.removeChild(child);

วิธีแก้ปัญหาทั่วไปมีดังนี้: ค้นหารายการย่อยที่คุณต้องการลบ และใช้รายการดังกล่าว คุณสมบัติ parentNode เพื่อค้นหาพาเรนต์:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

การแทนที่องค์ประกอบ HTML

หากต้องการแทนที่องค์ประกอบเพื่อ HTML DOM ให้ใช้ replaceChild() วิธีการ:

ตัวอย่าง

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>