Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 전체 문서 HTML을 문자열로 가져오는 방법

JavaScript에서 현재 열려 있는 전체 문서(document)의 HTML을 문자열로 가져오려면 innerHTML 속성을 활용하면 됩니다.

가장 간단한 방법은 다음과 같습니다.

document.documentElement.innerHTML;

위 코드는 루트 요소인 <html> 태그를 기준으로 내부에 포함된 모든 HTML 콘텐츠를 문자열 형태로 반환합니다.

예제 코드

다음은 실제 동작을 확인할 수 있는 전체 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
<body>
<h1> Hello World </h1>
<p>This is the javascript program..</p>
</body>
<script>
    var entireDocumentHTMLAsAString = document.documentElement.innerHTML;
    console.log(entireDocumentHTMLAsAString);
</script>
</html>

실행 방법

위 프로그램을 실행하려면 파일을 anyName.html 또는 index.html과 같은 이름으로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다. 이렇게 하면 로컬 서버가 시작되며 브라우저에서 결과를 바로 확인할 수 있습니다.

실행 결과

프로그램을 실행하면 브라우저 화면에는 작성된 웹 페이지가 그대로 표시됩니다.

동시에 개발자 도구(DevTools)의 콘솔(Console) 창을 열어보면, 아래와 같이 문서 전체의 HTML 소스가 문자열 형태로 출력된 것을 확인할 수 있습니다.

추가 팁

document.documentElement.outerHTML을 사용하면 루트 요소 자체(<html> 태그 포함)까지 모두 포함된 전체 HTML을 가져올 수 있습니다. 반면 innerHTML은 루트 요소의 내부 콘텐츠만 반환한다는 차이가 있으므로, 용도에 맞게 선택하여 사용하시기 바랍니다.