HTML DOM characterSet 속성이란?
HTML DOM의 characterSet 속성은 현재 HTML 문서와 연관된 문자 집합(character set)을 나타내는 속성입니다. 이 값은 일반적으로 <meta> 요소의 charset 속성과 연결되며, 별도로 지정하지 않으면 HTML 문서의 기본 문자 인코딩은 UTF-8입니다.
characterSet 속성은 해당 문서의 문자 인코딩 정보를 문자열(string) 형태로 반환합니다. 개발자는 HTML에서 charset 속성을 직접 지정하거나 DOM의 characterSet 속성을 활용하여 웹 페이지의 기본 문자 집합을 설정하거나 확인할 수 있습니다.
문법(Syntax)
characterSet 속성의 기본 문법은 다음과 같습니다.
document.characterSet
별도의 매개변수 없이 document 객체에 바로 접근하여 사용하며, 반환되는 값은 예를 들어 "UTF-8"과 같은 인코딩 이름의 문자열입니다.
예제(Example)
다음은 HTML DOM characterSet 속성을 활용한 간단한 예제입니다. 버튼을 클릭하면 현재 문서의 문자 인코딩이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 이 HTML 문서의 인코딩을 확인할 수 있습니다</p>
<button onclick="encode()">인코딩 확인</button>
<p id="Sample"></p>
<script>
function encode() {
var x = document.characterSet;
document.getElementById("Sample").innerHTML = "사용 중인 문자 인코딩은 "+ x +" 입니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
인코딩 확인 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 동작 원리
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 encode() 함수를 실행하는 인코딩 확인 버튼을 생성합니다.
<button onclick="encode()">인코딩 확인</button>
encode() 함수 내부에서는 document 객체의 characterSet 속성을 사용하여 현재 문서의 문자 인코딩 값을 가져온 뒤 변수 x에 할당합니다. 이후 getElementById() 메서드로 id가 "Sample"인 <p> 요소에 접근하고, innerHTML 속성에 안내 텍스트와 변수 x를 연결하여 할당함으로써 결과를 화면에 출력합니다.
function encode() {
var x = document.characterSet;
document.getElementById("Sample").innerHTML = "사용 중인 문자 인코딩은 "+ x +" 입니다";
}정리
characterSet 속성은 읽기 전용(read-only) 속성으로, 브라우저가 실제로 사용하고 있는 문자 인코딩을 정확하게 알려줍니다. 다국어 웹 페이지를 개발할 때나 인코딩 관련 오류(깨진 글자 등)를 디버깅할 때 유용하게 활용할 수 있으며, 대부분의 최신 브라우저에서 폭넓게 지원됩니다.