HTML DOM Article 객체란? 생성 방법과 활용 예제 완벽 정리

HTML DOM Article 객체는 HTML5에서 새롭게 도입된 <article> 요소를 JavaScript로 제어할 수 있게 해주는 객체입니다. <article> 요소는 HTML 문서 안에서 독립적으로 구성되는 콘텐츠 영역을 의미하며, HTML5에서 추가된 시맨틱(semantic) 태그 중 하나입니다.

문법(Syntax)

Article 객체를 생성하는 기본 문법은 다음과 같습니다.

var a = document.createElement("ARTICLE");

예제

HTML DOM Article 객체의 실제 활용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h3>ARTICLE HEADING</h3>
<article id="ArticleObj">
<h1>Heading</h1>
<p>Sample Article Text</p>
</article>
<p>Click the below button to change article size and color</p>
<button onclick="ChangeArticle()">CHANGE</button>
<button onclick="AddArticle()">ADD</button>
<script>
    function ChangeArticle() {
        var x = document.getElementById("ArticleObj");
        x.style.color = "green";
        x.style.fontSize = "25px";
    }
    function AddArticle() {
        var x = document.createElement("ARTICLE");
        x.setAttribute("id", "myArticle");
        document.body.appendChild(x);
        var heading = document.createElement("H1");
        var txt1 = document.createTextNode("Append Article");
        heading.appendChild(txt1);
        document.getElementById("myArticle").appendChild(heading);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Article 객체란? 생성 방법과 활용 예제 완벽 정리

"CHANGE" 버튼을 클릭하면 글자 색상과 크기가 아래와 같이 변경됩니다.

HTML DOM Article 객체란? 생성 방법과 활용 예제 완벽 정리

"ADD" 버튼을 클릭하면 새로운 article 요소가 문서에 동적으로 추가됩니다.

HTML DOM Article 객체란? 생성 방법과 활용 예제 완벽 정리

코드 상세 설명

먼저 id가 "ArticleObj"인 article 요소를 만들고, 그 안에 제목(<h1>)과 단락(<p>)을 포함시켰습니다.

<article id="ArticleObj">
<h1>Heading</h1>
<p>Sample Article Text</p>
</article>

이어서 CHANGE와 ADD 두 개의 버튼을 배치하여, 클릭 시 각각 ChangeArticle() 함수와 AddArticle() 함수가 실행되도록 연결했습니다.

<button onclick="ChangeArticle()">CHANGE</button>
<button onclick="AddArticle()">ADD</button>

ChangeArticle() 함수는 id가 "ArticleObj"인 요소를 가져온 뒤, 해당 요소의 글자 색상을 초록색(green)으로, 폰트 크기를 25px로 변경합니다.

function ChangeArticle() {
    var x = document.getElementById("ArticleObj");
    x.style.color = "green";
    x.style.fontSize = "25px";
}

AddArticle() 함수는 먼저 article 타입의 새 요소를 생성합니다. 그다음 setAttribute() 메서드를 사용해 "myArticle"이라는 id를 부여하고, 이 요소를 문서 본문(body) 끝에 추가합니다. 이후 <h1> 제목 요소를 만들고 createTextNode()로 텍스트 노드를 생성한 뒤 appendChild() 메서드로 제목에 텍스트를 붙입니다. 마지막으로 텍스트가 담긴 제목 전체를 id가 "myArticle"인 article 요소에 추가합니다.

function AddArticle() {
    var x = document.createElement("ARTICLE");
    x.setAttribute("id", "myArticle");
    document.body.appendChild(x);
    var heading = document.createElement("H1");
    var txt1 = document.createTextNode("Append Article");
    heading.appendChild(txt1);
    document.getElementById("myArticle").appendChild(heading);
}