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

HTMLDOM埋め込みコレクション

HTML DOM embedsコレクションは、HTMLドキュメントのembeds[]配列に存在するオブジェクトの数を返すために使用されます。コレクション内の要素は、HTMLドキュメントに表示されるのと同じ順序で存在します。

プロパティ

以下は、埋め込みコレクションのプロパティです-

プロパティ 説明
長さ コレクションに存在する要素の数を返します。このプロパティ値は読み取り専用であるため、変更できません。

メソッド

埋め込みコレクションの方法は次のとおりです-

メソッド 説明
[index] 指定されたインデックスを持つコレクション内の要素を返すため。インデックスは0から始まり、インデックス番号が範囲外の場合はnullが返されます。
item（index） 指定されたインデックスを持つコレクションから要素を返すため。インデックスは0から始まり、インデックス番号が範囲外の場合はnullが返されます。
namedItem 指定されたIDが関連付けられているコレクションから要素を返すこと。指定されたIDが存在しない場合は、Nullが返されます。

構文

以下は、埋め込みコレクションの構文です-

document.embeds

例

HTMLDOM埋め込みコレクションの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   .EMB{
      width:200px;
      height:200px;
      border:4px solid blue;
   }
</style>
</head>
<body>
<h1>Embeds collection example</h1>
<p>Get the number of embeds element in this document by clicking the below button.</p>
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">
<br><br>
<button onclick="embedsNo()">GET COUNT</button>
<p id="Sample"></p>
<script>
   function embedsNo() {
      var e = document.embeds.length;
      document.getElementById("Sample").innerHTML ="The number of embed elements in this document are " + e;
   }
</script>
</body>
</html>

出力

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

HTMLDOM埋め込みコレクション

GETCOUNTボタンをクリックすると-

HTMLDOM埋め込みコレクション

上記の例では-

共通のクラス属性値-

に基づいて、cssスタイルが適用された2つの埋め込み要素を作成しました。 
.EMB{
   width:200px;
   height:200px;
   border:4px solid blue;
}
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">

次に、ユーザーがクリックしたときにembedsNo（）メソッドを実行するGETCOUNTボタンを作成しました-

<button onclick="embedsNo()">GET COUNT</button>

embedsNo（）メソッドは、embeds.length属性値を取得し、それを変数eに割り当てます。ドキュメントには要素が2つしかないため、embeds.lengthは2を返します。

この値は、IDが「Sample」の段落に表示され、innerHTMLプロパティ値を目的のテキストに設定します-

function embedsNo() {
   var e = document.embeds.length;
   document.getElementById("Sample").innerHTML ="The number of embed elements it this document are " + e;
}

  1. HTMLDOMHRオブジェクト

    HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #fff;    

  2. HTMLDOMUlオブジェクト

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