자바스크립트에서는 document.implementation.createHTMLDocument() 메서드를 활용해 현재 문서와 독립적인 새로운 HTML 문서를 생성할 수 있습니다. 여기에 <base> 태그를 추가하면 문서 내 모든 상대 경로가 해석될 때 사용되는 사용자 정의 기준 URL(base URL)을 지정할 수 있습니다. 다음 예제를 통해 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<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>
const htmlDocument = document.implementation.createHTMLDocument();
const customURL = htmlDocument.createElement('base');
customURL.href = "https://www.tutorialspoint.com/java/index.htm";
htmlDocument.head.append(customURL);
console.log("Base URL=" + customURL.href);
const modifiedURL = htmlDocument.createElement("a");
modifiedURL.href = "../java/java_questions_answers.html";
htmlDocument.body.append(modifiedURL);
console.log("After Modifying URL=" + modifiedURL.href);
</script>
</body>
</html>
코드 설명
- createHTMLDocument(): DOM 명세에 정의된 메서드로, 메인 문서와 분리된 새로운 HTML 문서 객체를 반환합니다.
- customURL:
<base>요소를 생성하고 href 속성에 기준이 될 URL을 지정한 뒤 문서의 head에 추가합니다. - modifiedURL: 상대 경로(
../java/java_questions_answers.html)로 지정된<a>요소를 body에 추가하며, 이 상대 경로는 앞서 설정한 base URL을 기준으로 해석됩니다.
실행 방법
위 프로그램을 실행하려면 파일을 anyName.html(예: index.html)로 저장한 뒤 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 이어서 VS Code 편집기에서 Open with Live Server 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 브라우저 콘솔에 다음과 같은 결과가 출력됩니다.
Base URL=https://www.tutorialspoint.com/java/index.htm After Modifying URL=https://www.tutorialspoint.com/java/java_questions_answers.html
실행 결과에서 확인할 수 있듯이, 상대 경로였던 ../java/java_questions_answers.html이 base URL이 반영되어 최종적으로 https://www.tutorialspoint.com/java/java_questions_answers.html라는 절대 URL로 해석된 것을 볼 수 있습니다. 이처럼 createHTMLDocument()와 <base> 태그를 조합하면 동적으로 생성한 문서 안에서 링크의 기준 경로를 자유롭게 제어할 수 있습니다.