เปรียบเทียบ HTML Elements ใน JavaScript: คู่มือทีละขั้นตอน

การเปรียบเทียบ HTML Elements ใน JavaScript เป็นความต้องการทั่วไปเมื่อสร้าง Web Applications แบบ Dynamic คุณอาจต้องตรวจสอบว่า Element สองตัวมี Tag Name, Classes, Content หรือ Properties เหมือนกันหรือไม่ บทความนี้สำรวจ 2 วิธีที่มีประสิทธิภาพสำหรับเปรียบเทียบ HTML Elements ด้วย JavaScript

วิธีที่ 1: Manual Element Comparison

Manual Comparison ให้คุณควบคุม Properties ที่ต้องการเปรียบเทียบได้เต็มที่ วิธีนี้ตรวจสอบ Attributes เฉพาะอย่าง Tag Name, Class Name และ Content โดยตรง

<!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>

Div Elements 3 ตัวแสดงพร้อม Background สีเทา ด้านล่าง ผลการเปรียบเทียบ: ? First and Second elements are identical ? First and Third elements are different

วิธีที่ 2: JSON-Based Element Comparison

JSON Comparison Serialize Element Properties เป็น Strings เพื่อเปรียบเทียบง่าย วิธีนี้มีประสิทธิภาพเมื่อเปรียบเทียบหลาย Attributes พร้อมกัน

<!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>

Div Elements 3 ตัวพร้อม Background สีเทาอ่อน แสดง ด้านล่าง ผลเปรียบเทียบ: JSON Comparison Results: ? Block 1 and Block 2 are identical ? Block 1 and Block 3 are different

การเปรียบเทียบวิธีทั้งสอง

สรุป

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