ホームページ > 記事 > ウェブフロントエンド > DOM メモ (4): HTML 5 DOM 複合データ型_html/css_WEB-ITnose

DOM メモ (4): HTML 5 DOM 複合データ型_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:52:311034ブラウズ

HTML 5 DOM は、操作を便利にするためにコレクションやリストなどの複雑なデータ型を定義します。 HTML 4 DOM と比較して、HTML 5 DOM には HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection などが追加されています。

1. HTMLCollection、HTMLAllCollection、および HTMLFormControlsCollection

3 つのインターフェイスは、一連の要素で構成されるリストを表すために使用されます。 HTMLAllCollection と HTMLFormControlsCollection はどちらも HTMLCollection インターフェイスから継承し、HTMLCollection インターフェイスで定義されたnamedItem() メソッドを書き換えます。 DOM 注 (1): HTMLDocument インターフェイスでは、 document.forms (/images/embeds など) を使用して HTMLCollection オブジェクトを返し、 document.all は HTMLAllCollection オブジェクトを返し、 document.forms.elements は HTMLFormControlsCollection オブジェクトを返します。フォーム内のすべてのフォーム要素。

プロパティまたはメソッドデータ型説明lengthlong読み取り専用。コレクション内の要素の数を返します。 3 つのインターフェイスにはすべてこの属性がありますitem()object1. インデックスに従ってコレクション内の要素を取得します。 HTMLCollection tags()namedItem()1. HTMLCollection では、最初に名前に基づいて検索し、次に名前に基づいて検索します。 ID に基づいて、最初に一致した要素のみを返します。一致する要素がない場合は null が返されます。次の同等のものが存在します:



		2 で定義されています。HTMLCollection には次の同等のものがあります: document.forms(0)96b4fef55684b9312718d5de63fb7121document.forms[0]96b4fef55684b9312718d5de63fb7121document.forms.item(0)
HTMLAllCollection	タグ名に基づいて要素を取得します。 HTMLAllCollection で定義されています
object	name または id 属性に基づいてコレクション内の要素を取得します。違いは次のとおりです:	document.forms['formname']96b4fef55684b9312718d5de63fb7121document.forms('formname')96b4fef55684b9312718d5de63fb7121document.forms.namedItem('formname') 2. HTMLAllCollection では、一致する要素が複数ある場合は HTMLCollection オブジェクトが返され、一致する要素が 1 つだけの場合はその要素が返されます。 3. HTMLFormControlsCollection では、一致する要素が複数ある場合は RadioNodeList オブジェクトが返され、一致する要素が 1 つしかない場合はその要素が返されます。

2. HTMLOptionsCollection インターフェイス

このインターフェイスは、HTMLCollection とは異なり、具体的にはオプション要素のリストを返し、length 属性とnamedItem() メソッドをオーバーライドします。 HTMLSelectElement.options プロパティによって返されるデータ型は HTMLOptionsCollection です。

プロパティまたはメソッド名length 属性値がオプション要素の実際の数より小さい場合、HTMLSelectElement は冗長なオプション要素を自動的に削除しますadd() namedItem()remove()

データ型	説明
long	読み取りおよび書き込み可能。属性値がオプション要素の実際の数より大きい場合、HTMLSelectElement は空のオプション要素を自動的に追加します
void	オプション要素を挿入
object	名前またはIDに基づいてコレクション内の要素を取得
void	オプション要素を削除する

三、DOMTokenList および DOMSettableTokenList

DOMTokenList は、スペースで区切られた一連の識別子を表します。 DOM 注 (3): Element インターフェイスと HTMLElement インターフェイスでは、HTMLElement.classList 属性によって返されるデータ型は DOMTokenList です。 DOMSettableTokenList は DOMTokenList を継承しており、唯一の違いは value 属性の追加です。 HTMLLinkElement.size によって返されるデータ型は DOMSettableTokenList です。

プロパティまたはメソッドlengthvalueadd( )contains()remove()アイテム()toggle()toString()

4. DOMStringMap と NodeList

DOMStringMap インターフェイスは「キー/値ペア」のコレクションをマークし、JavaScript 構文を通じてキーと値のペアを削除、変更などできます。 DOM 注 (3): Element インターフェイスと HTMLElement インターフェイスでは、HTMLElement.dataset プロパティによって返されるデータ型は DOMStringMap

<html><head>     <title>DOMStringMap</title></head><body>     <img id="ex" data-ship-id="92432" data-x="30" data-y="10"           data-z="90"/>     <script>           var img = document.getElementById("ex");         //访问键值           alert(img.dataset.z);         //设置键值          img.dataset.shipId="343434";         //创建新键值对          img.dataset.defend=100;         //删除键值          delete img.dataset.y;     </script></body></html>

NodeList インターフェイスは、一連のノードで構成されるリストを表します。 document.getElementsByTagName() は NodeList オブジェクトを返します。これには、ノード数を返すために使用される読み取り専用の長さプロパティと、インデックスに基づいてノードにアクセスするために使用される item() メソッドがあります。以下の同等のメソッドがあります:

nodelist.item(0) 96b4fef55684b9312718d5de63fb7121nodelist[0]96b4fef55684b9312718d5de63fb7121nodelist(0)

データ型	説明
long	コレクション内の識別子の数
DOMString	DOMTokenList 値を取得または設定します
void	ロゴを挿入
boolean	ロゴが含まれているかどうかを判断
void	ロゴを削除
object	インデックスに基づいて識別子を取得
boolean	識別子が存在する場合は削除、存在しない場合は追加
DOM文字列	オブジェクトの文字列形式を返します

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS_html/css_WEB-ITnose の基本的な使い方次の記事：CSS_html/css_WEB-ITnose の基本的な使い方

続きを見る

DOM メモ (4): HTML 5 DOM 複合データ型_html/css_WEB-ITnose

関連記事