JavaScript에서 XML 데이터의 속성 값 가져오기

XML 데이터에서 원하는 속성(attribute)의 값을 가져오려면 JavaScript에서 attr() 메서드를 사용하면 됩니다. jQuery의 attr() 함수는 XML 문자열을 파싱한 뒤, 지정한 요소의 특정 속성 값을 간단하게 읽어올 수 있도록 도와주는 유용한 기능입니다.

아래 예제에서는 게임 정보가 담긴 XML 데이터에서 details 속성의 값을 콘솔에 출력하는 방법을 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
    var yourXMLDetails = '<Game id="101" details="Play the game and win the amount">'
    +'<gameName name="Cricket" content="/localhost/content/game/play/" />'
    +'<gameName name="Tennis" content="/localhost/game/all/scratch/" />'
    +'</Game>'
    console.log("Game Details==="+$(yourXMLDetails).attr("details"));
</script>
</body>
</html>

위 코드에서 핵심은 $(yourXMLDetails).attr("details") 부분입니다. XML 문자열을 jQuery 객체로 변환한 후, 최상위 요소인 <Game> 태그의 details 속성 값을 그대로 읽어와 콘솔에 출력합니다.

실행 방법

프로그램을 실행하려면 파일 이름을 "anyName.html(또는 index.html)"로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 이후 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 실행할 수 있습니다.

출력 결과

위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.

JavaScript에서 XML 데이터의 속성 값 가져오기 – attr() 메서드 활용법

콘솔에는 "Game Details===Play the game and win the amount"라는 문구가 표시되며, 이는 XML 데이터의 details 속성 값이 성공적으로 추출되었음을 의미합니다. 이처럼 attr() 메서드를 활용하면 별도의 복잡한 파싱 과정 없이도 XML 요소의 속성 값을 손쉽게 가져올 수 있습니다.