HTML DOM doctype 속성 완벽 가이드: 문서 유형 선언(DTD) 확인 방법

HTML DOM의 doctype 속성은 현재 HTML 문서와 연관된 DTD(Document Type Declaration, 문서 유형 선언)를 반환합니다. 이 속성은 읽기 전용(read-only)이며, doctype 이름을 DocumentType 객체 형태로 반환합니다. 만약 해당 문서에 DTD가 지정되어 있지 않다면 null을 반환합니다.

문법(Syntax)

doctype 속성의 기본 문법은 다음과 같습니다.

document.doctype

예제(Example)

doctype 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>doctype property example</h1>
<button onclick="getDoctype()">GET DOCTYPE</button>
<p id="Sample"></p>
<script>
    function getDoctype() {
        var doc = document.doctype.name;
        document.getElementById("Sample").innerHTML ="The doctype for this HTML document is: "+doc;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM doctype 속성 완벽 가이드: 문서 유형 선언(DTD) 확인 방법

GET DOCTYPE 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM doctype 속성 완벽 가이드: 문서 유형 선언(DTD) 확인 방법

코드 상세 설명

1. 문서 유형 선언(DTD) 설정

먼저 HTML 문서의 DTD(문서 유형 정의)를 HTML로 지정했습니다. 이를 통해 브라우저가 해당 문서를 표준 HTML 문서로 렌더링하도록 보장할 수 있습니다.

<!DOCTYPE html>

2. 버튼 생성

사용자가 클릭하면 getDoctype() 함수를 실행하는 GET DOCTYPE 버튼을 생성했습니다.

<button onclick="getDoctype()">GET DOCTYPE</button>

3. getDoctype() 함수 구현

getDoctype() 함수는 문서의 doctype 속성에서 name 값을 가져와 변수 doc에 할당합니다. 그런 다음 id가 "Sample"인 단락(paragraph)에 접근하여 innerHTML 속성을 원하는 텍스트로 설정함으로써 결과를 화면에 출력합니다.

function getDoctype() {
    var doc = document.doctype.name;
    document.getElementById("Sample").innerHTML ="The doctype for this HTML document is: "+doc;
}

정리

document.doctype 속성은 웹 문서의 유효성 검증이나 렌더링 모드 확인 등에 활용할 수 있는 유용한 기능입니다. 읽기 전용 속성이므로 값을 변경할 수는 없지만, 현재 문서의 문서 유형 선언 정보를 손쉽게 조회할 수 있다는 점에서 웹 개발 시 자주 활용됩니다.