HTMLDOM埋め込みコレクション
HTML DOM embedsコレクションは、HTMLドキュメントのembeds[]配列に存在するオブジェクトの数を返すために使用されます。コレクション内の要素は、HTMLドキュメントに表示されるのと同じ順序で存在します。
プロパティ
以下は、埋め込みコレクションのプロパティです-
プロパティ | 説明 |
---|---|
長さ | コレクションに存在する |
メソッド
埋め込みコレクションの方法は次のとおりです-
メソッド | 説明 |
---|---|
[index] | 指定されたインデックスを持つコレクション内の |
item(index) | 指定されたインデックスを持つコレクションから |
namedItem | 指定されたIDが関連付けられているコレクションから |
構文
以下は、埋め込みコレクションの構文です-
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>
出力
これにより、次の出力が生成されます-
GETCOUNTボタンをクリックすると-
上記の例では-
共通のクラス属性値-
に基づいて、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に割り当てます。ドキュメントには
この値は、IDが「Sample」の段落に表示され、innerHTMLプロパティ値を目的のテキストに設定します-
function embedsNo() { var e = document.embeds.length; document.getElementById("Sample").innerHTML ="The number of embed elements it this document are " + e; }
-
HTMLDOMHRオブジェクト
HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff;
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE