So sánh các phần tử HTML trong JavaScript là một yêu cầu phổ biến khi xây dựng các ứ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ẻ, lớp, nội dung hoặc cá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 các phần tử HTML bằng JavaScript.
Phương pháp 1:So sánh phần tử thủ công
So sánh thủ công cho phép bạn kiểm soát hoàn toàn những thuộc tính cần so sánh. Phương thức này trực tiếp kiểm tra các thuộc tính cụ thể như tên thẻ, tên lớp 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 = [];
// 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
Phương pháp 2:So sánh phần tử dựa trên JSON
So sánh JSON tuần tự hóa các thuộc tính phần tử thành chuỗi để dễ so sánh. Cách tiếp cận này hiệu quả khi so sánh đồng thời nhiều thuộc tính
<!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
So sánh các phương pháp
Kết luận
Cả hai phương pháp đều cung cấp những cách hiệu quả để so sánh các 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 một cách hiệu quả.
