HTML (HyperText Markup Language)과 XML (eXtensible Markup Language)은 두 가지 중요한 마크업 언어입니다. 각각의 용도와 특성이 다르며, 웹 개발과 데이터 관리 분야에서 중요한 역할을 합니다.
HTML (HyperText Markup Language):
HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 웹 페이지의 구조를 정의하고, 텍스트, 이미지, 링크 등의 콘텐츠를 웹 브라우저에 표시하는 방법을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 예시 페이지</title>
</head>
<body>
<h1>나의 첫 번째 웹 페이지</h1>
<p>이것은 <strong>HTML</strong> 예시입니다.</p>
<a href="https://www.example.com">여기를 클릭</a>하여 더 많은 정보를 얻으세요.
</body>
</html>
XML (eXtensible Markup Language):
XML은 데이터를 저장하고 전송하는 데 사용되는 마크업 언어입니다. HTML과 달리, XML은 데이터의 구조와 의미를 기술하는 데 중점을 둡니다. XML은 사용자가 태그를 정의하여 데이터를 구조화할 수 있게 해줍니다.
<?xml version="1.0" encoding="UTF-8"?>
<사용자정보>
<이름>홍길동</이름>
<이메일>honggildong@example.com</이메일>
<나이>30</나이>
<국가>대한민국</국가>
</사용자정보>
JavaScript에서 XML 데이터 처리하는 방법은?
방법 중 하나는 DOMParser 객체를 사용하여 XML 문자열을 DOM(Document Object Model)으로 변환하고, 이를 통해 XML 데이터에 접근하고 조작하는 것입니다. 이 방법을 사용하면 XML 내의 데이터를 읽고, 수정하고, 추출할 수 있습니다.
// XML 문자열 예시
const xmlString = `
<사용자정보>
<이름>홍길동</이름>
<이메일>honggildong@example.com</이메일>
<나이>30</나이>
<국가>대한민국</국가>
</사용자정보>
`;
// DOMParser 객체 생성
const parser = new DOMParser();
// XML 문자열을 parseFromString 활용하여 DOM 객체로 파싱
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
console.log(xmlDoc)
// getElementsByTagName 활용하여 태그 이름으로 검색 후 데이터 접근 및 읽기
const 이름 = xmlDoc.getElementsByTagName("이름")[0].textContent;
const 이메일 = xmlDoc.getElementsByTagName("이메일")[0].textContent;
const 나이 = xmlDoc.getElementsByTagName("나이")[0].textContent;
const 국가 = xmlDoc.getElementsByTagName("국가")[0].textContent;
// 결과 출력
console.log(`이름: ${이름}, 이메일: ${이메일}, 나이: ${나이}, 국가: ${국가}`);
HTML과 XML의 비교:
- HTML은 웹 페이지의 구조와 디자인을 위한 것이고, XML은 데이터의 저장과 전송을 위한 것입니다.
- XML에서는 사용자가 태그를 정의할 수 있지만, HTML에서는 표준 태그 세트를 사용해야 합니다.
- HTML은 주로 시각적 표현에 중점을 두고, XML은 데이터의 구조와 의미에 중점을 둡니다.
두 언어는 서로 다른 목적으로 설계되었으며, 웹 개발에서 각각의 역할이 중요합니다. HTML은 웹 페이지를 만드는 데 필수적이고, XML은 복잡한 데이터 구조를 다루고 다양한 시스템 간에 데이터를 교환하는 데 필수적입니다.
'Lab Notes' 카테고리의 다른 글
| promise.all & promise.allsettled 이해하기 (0) | 2024.04.09 |
|---|---|
| setTimeout의 정확성 (0) | 2024.04.09 |
| BigInt vs Number (0) | 2023.11.10 |
