HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOM記事オブジェクト

HTML DOM Articleオブジェクトは、HTML5で導入されたHTML

要素を表します。記事は、HTMLドキュメントの自己完結型の領域です。これは、HTML5で導入されたセマンティックタグの一部です。

構文

以下は、-

の構文です。

記事オブジェクトの作成

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

例

HTMLDOM記事オブジェクトの例を見てみましょう-

<!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>

出力

これにより、次の出力が生成されます-

HTMLDOM記事オブジェクト

「変更」ボタンをクリック-

HTMLDOM記事オブジェクト

「追加」ボタンをクリック-

HTMLDOM記事オブジェクト

上記の例では-

最初に、IDが「ArticleObj」でヘッダーと段落が含まれる記事を作成しました-

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

次に、ChangeArticle（）関数とAddArticle（）関数をそれぞれ実行するために、CHANGEとADDという名前の2つのボタンを作成しました。

<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を割り当てます。次に、article要素がドキュメント本文に追加されます。見出しが作成され、appendchildプロパティを使用して見出しが追加されます。次に、見出しとテキストコンテンツが、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);
}

  1. HTMLDOMタイトルオブジェクト

    HTMLのHTMLDOMTitle Objectは、要素を表します。 を作成する 要素 var titleObject = document.createElement(“TITLE”) ここでは、「titleObject」 次のプロパティを持つことができます- プロパティ 説明 テキスト ドキュメントの要素の値を設定/返します タイトルテキストの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title id="titleSe

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE