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

HTMLDOMDetailsオブジェクト

HTML DOM Detailsオブジェクトは、HTMLの

要素に関連付けられています。これにより、ユーザーが見たい場合にのみ表示できる情報を非表示にすることができます。

プロパティ

以下は、Detailsオブジェクトのプロパティです-

Sr.No プロパティと説明
1 開く
詳細をユーザーに表示するかどうかを設定または返す。

構文

以下は、-

の構文です。

詳細オブジェクトの作成-

var p = document.createElement("DETAILS");

例

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

<!DOCTYPE html>
<html>
<body>
<h2>Details object</h2>
<p>Click the below button to create a DETAILS element about a monument</p>
<button onclick="detCreate()">CREATE</button>
<br><br>
<script>
   function detCreate() {
      var et = document.createElement("DETAILS");
      var sum=document.createElement("SUMMARY");
      var sumText=document.createTextNode("Eiffel Tower");
      var txt = document.createTextNode("It is one of the most popular monument in the world");
      sum.appendChild(sumText);
      et.appendChild(txt);
      document.body.appendChild(sum);
      document.body.appendChild(et);
   }
</script>
</body>
</html>

出力

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

HTMLDOMDetailsオブジェクト

[作成]ボタンをクリックし、矢印をクリックして詳細を展開すると-

HTMLDOMDetailsオブジェクト

上記の例では-

ユーザーがクリックしたときにdetCreate（）関数を実行するCREATEボタンを作成しました-

<button onclick="detCreate()">CREATE</button>

detCreate（）関数は、ドキュメントオブジェクトのcreateElement（）メソッドを使用して

要素を作成し、それを変数etに割り当てます。次に、
要素の一部である別の要素を作成し、その中にドキュメントオブジェクトのcreateElement（）メソッドによって含まれ、変数sumに割り当てます。

次に、2つのテキストノードsumtxtとtxtが作成され、それぞれ

要素と
要素に追加されます。新しく作成された要素とdetails要素は、appendChild（）メソッドを使用してドキュメント本体に追加され、追加される要素をパラメーター-

として渡します。 
function detCreate() {  
   var et = document.createElement("DETAILS");  
   var sum=document.createElement("SUMMARY");  
   var sumText=document.createTextNode("Eiffel Tower");  
   var txt = document.createTextNode("It is one of the most popular monument in the world");    
   sum.appendChild(sumText);  
   et.appendChild(txt);  
   document.body.appendChild(sum);  
   document.body.appendChild(et);
}

  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