HTML DOM Article 객체는 HTML5에 도입된 HTML
구문
다음은 −
의 구문입니다.기사 개체 만들기
var a = document.createElement("ARTICLE"); 예시
HTML DOM 기사 객체의 예를 살펴보겠습니다 -
<!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> 출력
이것은 다음과 같은 출력을 생성합니다 -
"변경" 버튼을 클릭하십시오-
"추가" 버튼 클릭 -
위의 예에서 -
먼저 ID가 "ArticleObj"이고 헤더와 단락이 있는 기사를 만들었습니다. −
<article id="ArticleObj"> <h1>Heading</h1> <p>Sample Article Text</p> </article>
그런 다음 ChangeArticle() 및 AddArticle() 함수를 각각 실행하기 위해 CHANGE 및 ADD라는 두 개의 버튼을 생성했습니다.
<button onclick="ChangeArticle()">CHANGE</button> <button onclick="AddArticle()">ADD</button>
ChangeArticle() 함수는 id가 "ArticleObj"인 요소를 가져와 색상과 글꼴 크기를 변경합니다. -
function ChangeArticle() {
var x = document.getElementById("ArticleObj");
x.style.color = "green";
x.style.fontSize = "25px";
} AddArticle() 함수는 먼저 article 유형의 요소를 만듭니다. 그런 다음 setAttribute 메서드를 사용하여 "myArticle" ID를 할당합니다. 그러면 문서 요소가 문서 본문에 추가됩니다. 제목이 생성되고 추가 자식 속성을 사용하여 제목에 일부 텍스트가 추가됩니다. 그런 다음 텍스트 내용과 함께 제목이 ID가 "myArticle"인 기사에 추가됩니다. -
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);
}