JavaScript를 활용한 HTML 목록 정렬하기
웹 페이지에서 목록 항목을 알파벳순으로 자동 정렬하는 기능은 사용자 편의성을 크게 높여줍니다. JavaScript를 사용하면 별도의 라이브러리 없이도 순수 DOM 조작만으로 목록을 손쉽게 정렬할 수 있습니다. 아래 예제는 버튼을 클릭하면 동물 이름 목록이 알파벳순으로 정렬되는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<h1>Sorting list example</h1>
<button>Click to sort</button>
<ul class="animalList">
<li>Giraffe</li>
<li>Camel</li>
<li>Dog</li>
<li>Lion</li>
<li>Cheetah</li>
<li>Cat</li>
</ul>
<script>
document.getElementsByTagName("button")[0].addEventListener("click", sortList);
function sortList() {
var list, i, sortFlag, LiEle, sorted;
list = document.querySelector(".animalList");
sortFlag = true;
while (sortFlag) {
sortFlag = false;
LiEle = list.getElementsByTagName("LI");
for (i = 0; i < LiEle.length - 1; i++) {
sorted = false;
if ( LiEle[i].innerHTML.toLowerCase() > LiEle[i + 1].innerHTML.toLowerCase() ) {
sorted = true;
break;
}
}
if (sorted) {
LiEle[i].parentNode.insertBefore(LiEle[i + 1], LiEle[i]);
sortFlag = true;
}
}
}
</script>
</body>
</html>코드 작동 원리
위 코드의 핵심 로직은 다음과 같이 동작합니다.
1. 이벤트 리스너 등록: addEventListener를 통해 버튼 클릭 시 sortList 함수가 실행되도록 설정합니다.
2. 인접 항목 비교: getElementsByTagName("LI")로 모든 목록 항목을 가져온 뒤, 인접한 두 항목의 텍스트를 toLowerCase()로 소문자 변환하여 대소문자 구분 없이 비교합니다.
3. 순서 교환: 앞 항목이 뒤 항목보다 사전순으로 늦을 경우, insertBefore 메서드로 두 요소의 위치를 교환합니다.
4. 반복 정렬: 더 이상 교환이 필요하지 않을 때까지 위 과정을 반복합니다. 이는 버블 정렬(Bubble Sort) 방식과 유사한 원리입니다.
실행 결과
위 코드를 실행하면 다음과 같이 정렬되지 않은 동물 목록이 화면에 표시됩니다.
“Click to sort” 버튼을 클릭하면 목록이 다음과 같이 알파벳순으로 정렬됩니다.
마무리
이처럼 JavaScript의 DOM 조작 기능만 활용해도 서버 통신이나 외부 라이브러리 없이 목록을 동적으로 정렬할 수 있습니다. 실제 프로젝트에서는 Array.prototype.sort()와 localeCompare()를 함께 사용하면 한글, 특수문자 등 다양한 언어 환경에서도 더욱 안정적인 정렬을 구현할 수 있습니다.