HTML DOM 文章对象

HTML DOM 文章对象代表 HTML5 中引入的 HTML <article> 元素。文章是 HTML 文档中一个独立的区域。它是 HTML5 中引入的语义标签的一部分。

语法

以下是语法 −

创建文章对象

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>

然后我们创建了两个名为 CHANGE 和 ADD 的按钮，分别用于执行 ChangeArticle() 和 AddArticle() 函数

<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 方法为其分配 ID"myArticle"。之后，该 article 元素被附加到文档正文中。创建标题，并使用 append 子属性向其附加一些文本。之后，标题和文本内容被附加到 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);
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/