HTML DOM의 헤딩(Heading) 객체는 HTML 문서에서 사용되는 <h1>부터 <h6>까지의 제목 태그와 연관된 객체입니다. 이 객체를 활용하면 자바스크립트만으로 새로운 제목 요소를 동적으로 만들거나, 이미 존재하는 제목 요소에 접근해 내용과 스타일을 조작할 수 있습니다.
제목 요소를 생성할 때는 createElement() 메서드를, 기존 요소에 접근할 때는 getElementById() 메서드를 각각 사용합니다.
문법(Syntax)
헤딩 객체 생성하기
var p = document.createElement("H1");위 코드는 document 객체의 createElement() 메서드에 태그 이름을 인자로 전달하여 새로운 <h1> 요소를 생성하는 기본 문법입니다. 마찬가지 방식으로 "H2" ~ "H6" 문자열을 전달하면 해당 단계의 제목 요소를 만들 수 있습니다.
예제(Example)
버튼을 클릭하면 <h1> 요소가 화면에 추가되는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading object example</h1>
<p>Create a h1 element by clicking the below button</p>
<button onclick="createH1()">CREATE</button>
<script>
function createH1() {
var h = document.createElement("H1");
var txt = document.createTextNode("H1 element has been created");
h.appendChild(txt);
document.body.appendChild(h);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CREATE 버튼을 클릭하면 아래와 같이 새로운 <h1> 요소가 문서에 추가됩니다.
코드 상세 설명
위 예제의 동작 흐름을 단계별로 살펴보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 클릭 시 createH1() 함수를 실행하도록 onclick 이벤트가 연결된 CREATE 버튼을 만듭니다.
<button onclick="createH1()">CREATE</button>
2. createH1() 함수의 동작
createH1() 함수는 document 객체의 createElement() 메서드를 호출해 <h1> 제목 요소를 생성한 뒤 변수 h에 할당합니다. 이어서 createTextNode() 메서드로 제목에 들어갈 텍스트 노드를 만들고, appendChild() 메서드를 사용해 이 텍스트 노드를 <h1> 요소의 자식으로 추가합니다.
마지막으로 텍스트가 포함된 <h1> 요소 전체를 appendChild() 메서드로 document의 body에 자식 노드로 붙여 넣으면, 화면에 새로운 제목이 실제로 표시됩니다.
function createH1() {
var h = document.createElement("H1");
var txt = document.createTextNode("H1 element has been created");
h.appendChild(txt);
document.body.appendChild(h);
}기존 헤딩 요소에 접근하기
생성뿐 아니라 이미 문서에 존재하는 제목 요소에 접근할 수도 있습니다. 대상 요소에 id 속성을 지정한 뒤 getElementById() 메서드를 사용하면 됩니다.
<h1 id="myHeading">원본 제목</h1>
<script>
var heading = document.getElementById("myHeading");
heading.innerHTML = "변경된 제목";
</script>이처럼 HTML DOM 헤딩 객체를 활용하면 <h1>~<h6> 제목 요소를 자유롭게 생성·수정할 수 있어, 동적인 웹 페이지 구성에 유용하게 활용됩니다.