การเปรียบเทียบองค์ประกอบ HTML ใน JavaScript:คำแนะนำทีละขั้นตอน

การเปรียบเทียบองค์ประกอบ HTML ใน JavaScript เป็นข้อกำหนดทั่วไปเมื่อสร้างแอปพลิเคชันเว็บแบบไดนามิก คุณอาจต้องตรวจสอบว่าองค์ประกอบทั้งสองมีชื่อแท็ก คลาส เนื้อหา หรือคุณสมบัติอื่นๆ ที่เหมือนกันหรือไม่ บทความนี้สำรวจสองวิธีที่มีประสิทธิภาพในการเปรียบเทียบองค์ประกอบ HTML โดยใช้ JavaScript

วิธีที่ 1:การเปรียบเทียบองค์ประกอบด้วยตนเอง

การเปรียบเทียบด้วยตนเองช่วยให้คุณควบคุมคุณสมบัติที่จะเปรียบเทียบได้อย่างสมบูรณ์ วิธีการนี้จะตรวจสอบคุณลักษณะเฉพาะโดยตรง เช่น ชื่อแท็ก ชื่อคลาส และเนื้อหา

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Manual HTML Elements Comparison</title>
 <style>
 .sample {
 padding: 10px;
 margin: 5px 0;
 background-color: #f0f0f0;
 border: 1px solid #ccc;
 }
 .result {
 margin-top: 20px;
 padding: 10px;
 background-color: #e8f5e8;
 border-left: 4px solid #4CAF50;
 }
 </style>
</head>
<body>
 <div id="firstElement" class="sample">Hello World</div>
 <div id="secondElement" class="sample">Hello World</div>
 <div id="thirdElement" class="sample">TutorialsPoint</div>
 <div id="output" class="result"></div>
 <script>
 function areElementsSame(elementA, elementB) {
 return elementA.tagName === elementB.tagName &&
 elementA.className === elementB.className &&
 elementA.innerText === elementB.innerText;
 }
 const firstElement = document.getElementById("firstElement");
 const secondElement = document.getElementById("secondElement");
 const thirdElement = document.getElementById("thirdElement");
 const output = document.getElementById("output");
 let results = [];
 // Compare first and second elements
 if (areElementsSame(firstElement, secondElement)) {
 results.push("? First and Second elements are identical");
 } else {
 results.push("? First and Second elements are different");
 }
 // Compare first and third elements
 if (areElementsSame(firstElement, thirdElement)) {
 results.push("? First and Third elements are identical");
 } else {
 results.push("? First and Third elements are different");
 }
 output.innerHTML = results.join("<br>");
 </script>
</body>
</html>

Three div elements are displayed with gray backgrounds. Below them, comparison results show:
? First and Second elements are identical
? First and Third elements are different

วิธีที่ 2:การเปรียบเทียบองค์ประกอบตาม JSON

การเปรียบเทียบ JSON ทำให้คุณสมบัติขององค์ประกอบเป็นอนุกรมเป็นสตริงเพื่อให้เปรียบเทียบได้ง่าย วิธีการนี้มีประสิทธิภาพเมื่อเปรียบเทียบคุณลักษณะหลายรายการพร้อมกัน

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>JSON-Based HTML Elements Comparison</title>
 <style>
 .content {
 padding: 15px;
 margin: 5px 0;
 background-color: #f9f9f9;
 border: 1px solid #ddd;
 border-radius: 4px;
 }
 .result {
 margin-top: 20px;
 padding: 15px;
 background-color: #fff3cd;
 border: 1px solid #ffeaa7;
 border-radius: 4px;
 }
 </style>
</head>
<body>
 <div id="block1" class="content" data-value="test">Hello World</div>
 <div id="block2" class="content" data-value="test">Hello World</div>
 <div id="block3" class="content" data-value="different">TutorialsPoint</div>
 <div id="output" class="result"></div>
 <script>
 function compareElementsByJSON(el1, el2) {
 const el1Props = {
 tagName: el1.tagName,
 className: el1.className,
 innerText: el1.innerText,
 dataset: el1.dataset
 };
 const el2Props = {
 tagName: el2.tagName,
 className: el2.className,
 innerText: el2.innerText,
 dataset: el2.dataset
 };
 return JSON.stringify(el1Props) === JSON.stringify(el2Props);
 }
 const block1 = document.getElementById("block1");
 const block2 = document.getElementById("block2");
 const block3 = document.getElementById("block3");
 const output = document.getElementById("output");
 let comparisons = [];
 // Compare block1 and block2
 if (compareElementsByJSON(block1, block2)) {
 comparisons.push("? Block 1 and Block 2 are identical");
 } else {
 comparisons.push("? Block 1 and Block 2 are different");
 }
 // Compare block1 and block3
 if (compareElementsByJSON(block1, block3)) {
 comparisons.push("? Block 1 and Block 3 are identical");
 } else {
 comparisons.push("? Block 1 and Block 3 are different");
 }
 output.innerHTML = "<h4>JSON Comparison Results:</h4>" + comparisons.join("<br>");
 </script>
</body>
</html>

Three div elements with light gray backgrounds are displayed. Below them, the comparison results show:
JSON Comparison Results:
? Block 1 and Block 2 are identical
? Block 1 and Block 3 are different

การเปรียบเทียบวิธีการ

มุมมอง การเปรียบเทียบด้วยตนเอง การเปรียบเทียบ JSON ควบคุม การควบคุมคุณสมบัติทั้งหมด เปรียบเทียบคุณสมบัติที่กำหนดไว้ทั้งหมด ประสิทธิภาพ เร็วขึ้นสำหรับคุณสมบัติไม่กี่อย่าง มีประสิทธิภาพสำหรับคุณสมบัติหลายอย่าง ความยืดหยุ่น ปรับแต่งได้สูง ปรับแต่งได้น้อยลง ความซับซ้อนของรหัส ง่ายสำหรับการเปรียบเทียบพื้นฐาน สะอาดกว่าสำหรับการเปรียบเทียบที่ซับซ้อน

บทสรุป

ทั้งสองวิธีเสนอวิธีที่มีประสิทธิภาพในการเปรียบเทียบองค์ประกอบ HTML ใน JavaScript ใช้การเปรียบเทียบด้วยตนเองเมื่อคุณต้องการการควบคุมคุณสมบัติเฉพาะอย่างแม่นยำ และใช้การเปรียบเทียบ JSON เมื่อจัดการกับแอตทริบิวต์หลายรายการอย่างมีประสิทธิภาพ

การเปรียบเทียบองค์ประกอบ HTML ใน JavaScript:คำแนะนำทีละขั้นตอน