HTML DOM Meta 객체 – <meta> 요소를 다루는 방법과 주요 속성

HTML DOM의 Meta 객체는 HTML 문서에서 <meta> 요소를 나타내며, 이를 통해 자바스크립트로 메타 태그를 동적으로 생성하거나 조작할 수 있습니다.

문법(Syntax)

Meta 객체를 다루는 기본 문법은 다음과 같습니다.

<meta> 요소 생성하기

var metaObject = document.createElement("META")

주요 속성(Properties)

생성된 metaObject에서 사용할 수 있는 주요 컬렉션과 속성은 아래 표와 같습니다.

속성	설명
content	<meta> 요소의 content 속성 값을 설정하거나 반환합니다.
httpEquiv	<meta> 요소의 content 속성에 담긴 정보에 대한 HTTP 헤더를 설정하거나 반환합니다.
name	<meta> 요소의 content 속성에 담긴 정보에 대한 이름(name)을 설정하거나 반환합니다.
scheme	content 속성 값을 해석하는 방식을 설정하거나 반환하지만, HTML5에서는 지원되지 않습니다.

예제(Example)

버튼을 클릭하면 새로운 <meta> 태그를 동적으로 생성하여 문서의 head에 추가하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Meta Object</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meta-Object</legend>
<h2>Tutorial</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<input type="button" onclick="createMeta()" value="Create Meta Tag">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    function createMeta(){
        var metaTag = document.createElement('META');
        metaTag.setAttribute("name", "tutorialsContent");
        metaTag.setAttribute("content", "JS tutorials");
        document.head.appendChild(metaTag);
        divDisplay.textContent = '<meta name="'+metaTag.name+'" content="'+metaTag.content+'" >';
    }
</script>
</body>
</html>

실행 결과(Output)

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

'Create Meta Tag' 버튼을 클릭하기 전 화면입니다.

HTML DOM Meta 객체 – meta 요소를 다루는 방법과 주요 속성

'Create Meta Tag' 버튼을 클릭한 후, name과 content 속성이 지정된 새로운 <meta> 태그가 생성되어 문서의 head에 추가된 것을 확인할 수 있습니다.