동적 웹 애플리케이션을 개발하다 보면 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>
실행 결과: 회색 배경의 div 요소 세 개가 화면에 표시되고, 그 아래에 다음과 같은 비교 결과가 출력됩니다.
✓ 첫 번째 요소와 두 번째 요소는 동일합니다
✗ 첫 번째 요소와 세 번째 요소는 서로 다릅니다
방법 2: JSON 기반 요소 비교
JSON 비교 방식은 요소의 속성들을 문자열로 직렬화(serialize)한 뒤 비교합니다. 여러 속성을 동시에 비교해야 할 때 특히 효율적이며, 비교 대상 속성을 객체 하나로 관리할 수 있어 코드 유지보수도 쉬워집니다.
<!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 요소 세 개가 화면에 표시되고, 그 아래에 다음과 같은 비교 결과가 출력됩니다.
JSON 비교 결과:
✓ Block 1과 Block 2는 동일합니다
✗ Block 1과 Block 3는 서로 다릅니다
두 방법 비교
각 방식의 특징을 한눈에 비교하면 다음과 같습니다.
| 구분 | 수동 비교 | JSON 비교 |
|---|---|---|
| 제어 수준 | 비교할 속성을 완전히 제어 가능 | 정의된 모든 속성을 한꺼번에 비교 |
| 성능 | 속성이 적을 때 더 빠름 | 속성이 많을 때 효율적 |
| 유연성 | 자유로운 커스터마이징 가능 | 커스터마이징 범위가 상대적으로 제한적 |
| 코드 복잡도 | 간단한 비교에 적합하며 코드가 단순함 | 복잡한 비교에서 코드가 더 깔끔함 |
결론
두 방법 모두 JavaScript에서 HTML 요소를 비교하는 데 효과적인 접근 방식입니다. 특정 속성에 대한 정밀한 제어가 필요하다면 수동 비교를, 여러 속성을 효율적으로 한 번에 처리해야 한다면 JSON 비교를 선택하는 것이 좋습니다. 프로젝트의 요구 사항과 비교 대상 속성의 개수를 고려해 적절한 방법을 적용해 보세요.
