JavaScript의 HTML 요소를 비교하는 것은 동적 웹 애플리케이션을 구축할 때 일반적인 요구 사항입니다. 두 요소가 동일한 태그 이름, 클래스, 콘텐츠 또는 기타 속성을 가지고 있는지 확인해야 할 수도 있습니다. 이 문서에서는 JavaScript를 사용하여 HTML 요소를 비교하는 두 가지 효과적인 방법을 살펴봅니다.
방법 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
방법 비교
결론
두 방법 모두 JavaScript에서 HTML 요소를 비교하는 효과적인 방법을 제공합니다. 특정 속성을 정밀하게 제어해야 할 경우 수동 비교를 사용하고, 여러 속성을 효율적으로 처리할 경우 JSON 비교를 사용하세요.
