HTML DOM Article对象(Article Object)

Article对象代表了HTML文档中的Article元素

如何访问Article对象?

使用getElementById()访问Article元素。

var  x = document.getElementById("myArticle");

如何创建Article对象

使用createElement()方法创建Article元素。

var x = document.createElement("article");

标准属性及事件

Article对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问 ARTICLE元素?</h3>

<article id="myA">

<h1>标题</h1>

<p>文章的内容..</p>

</article>

<p>点击以下按钮,改变 article元素内容的颜色</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.getElementById("myA");

x.style.color = "red";

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建 ARTICLE元素?</h3>

<p>点击以下按钮,创建一个 article元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

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

x.setAttribute("id", "myA");

document.body.appendChild(x);

var heading = document.createElement("H1");

var txt1 = document.createTextNode("标题");

heading.appendChild(txt1);

document.getElementById("myA").appendChild(heading);

var para = document.createElement("P");

var txt2 = document.createTextNode("文章的内容..");

para.appendChild(txt2);

document.getElementById("myA").appendChild(para);

}

</script>

</body>

</html>

关联内容