So sánh phần tử HTML trong JavaScript: Hướng dẫn từng bước

So sánh các phần tử HTML trong JavaScript là yêu cầu phổ biến khi xây dựng ứng dụng web động. Bạn có thể cần kiểm tra xem hai phần tử có cùng tên thẻ, class, nội dung hoặc thuộc tính khác hay không. Bài viết này khám phá hai phương pháp hiệu quả để so sánh phần tử HTML sử dụng JavaScript.

Phương pháp 1: So sánh phần tử thủ công

So sánh thủ công cho bạn kiểm soát hoàn toàn về thuộc tính nào để so sánh. Phương pháp này trực tiếp kiểm tra các thuộc tính cụ thể như tên thẻ, tên class và nội dung.

<!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 = [];
// So sánh first và second
if (areElementsSame(firstElement, secondElement)) {
  results.push("✓ First and Second elements are identical");
} else {
  results.push("✗ First and Second elements are different");
}
// So sánh first và third
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>

Ba phần tử div hiển thị với nền xám. Dưới đó, kết quả so sánh hiển thị:
✓ First and Second elements are identical
✗ First and Third elements are different

Phương pháp 2: So sánh dựa trên JSON

So sánh JSON tuần tự hóa thuộc tính phần tử thành chuỗi để so sánh dễ dàng. Cách tiếp cận này hiệu quả khi so sánh nhiều thuộc tính cùng lúc.

<!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 = [];
// So sánh block1 và block2
if (compareElementsByJSON(block1, block2)) {
  comparisons.push("✓ Block 1 and Block 2 are identical");
} else {
  comparisons.push("✗ Block 1 and Block 2 are different");
}
// So sánh block1 và 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>

Ba phần tử div với nền xám nhạt được hiển thị. Dưới đó, kết quả so sánh hiển thị:
JSON Comparison Results:
✓ Block 1 and Block 2 are identical
✗ Block 1 and Block 3 are different

So sánh các phương pháp

Kết luận

Cả hai phương pháp đều cung cấp cách hiệu quả để so sánh phần tử HTML trong JavaScript. Sử dụng so sánh thủ công khi bạn cần kiểm soát chính xác các thuộc tính cụ thể, và so sánh JSON khi xử lý nhiều thuộc tính hiệu quả.