資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時尚研究
法律研究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>
然後我們建立了兩個名為“更改”和“新增”的按鈕，分別執行 ChangeArticle() 和 AddArticle() 函式
<button onclick="ChangeArticle()">CHANGE</button> <button onclick="AddArticle()">ADD</button>
Function ChangeArticle() 獲取與之關聯的 id 為“ArticleObj”的元素，並更改其顏色和字型大小 -
function ChangeArticle() {
var x = document.getElementById("ArticleObj");
x.style.color = "green";
x.style.fontSize = "25px";
}Function AddArticle() 會先建立一個型別為 article 的元素。然後使用 setAttribute 方法為其分配“myArticle”id。然後將 article 元素追加到文件主體中。建立標題並使用 append child 屬性向其附加一些文字。然後將標題和文字內容一起追加到 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);
}
更新於: 2021 年 2 月 20 日
65 次瀏覽
廣告