HTML オブジェクトの場合、最初に Node ノードについて言及する必要があります。Node はインターフェースから継承され、これらのさまざまなタイプを同様に処理 (またはテスト) できます。 Node がそのメソッドやプロパティから継承するインターフェイスはありますか?まずはこの記事を読んでみましょう。 apache php mysql
あなたはしばらく Web 開発を行っているかもしれませんが、次のような疑問を考えたことはありますか?
p 要素、さらにはすべての html 要素で addEventListener を使用してイベントを追加できるのはなぜですか?
各 DOM ノードにparentNode、firstChild、nodeType などの属性があるのはなぜですか?
すべての DOM 要素に className、classList、innerHTML などの属性があるのはなぜですか?
一部の DOM 要素に accessKey、contentEditable、isContentEditable などの属性があるのはなぜですか?
すべての DOM 要素に onclick、ondblclick、ondrag などの属性があるのはなぜですか?
この記事は、これらの単純だが「単純」ではない質問に答えるものです。
EventTarget は、イベントを受信できるオブジェクトによって実装されるインターフェイスであり、イベントに対してリスナーを作成できます。
要素、ドキュメント、ウィンドウは最も一般的なイベント ターゲットですが、XMLHttpRequest、AudioNode、AudioContext などの他のオブジェクトもイベント ターゲットになる可能性があります。
多くのイベント ターゲット (要素、ドキュメント、ウィンドウを含む) は、onXXX (onclick など) 属性および属性を介したイベント ハンドラーの設定もサポートしています。
EventTarget の特定のイベント タイプのイベント ハンドラーを登録します。
EventTarget のイベント リスナーを削除します。
イベントをこの EventTarget にディスパッチします。
var EventTarget = function() {
this.listeners = {};
};
EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
if (!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);
};
EventTarget.prototype.removeEventListener = function(type, callback) {
if (!(type in this.listeners)) {
return;
}
var stack = this.listeners[type];
for (var i = 0, l = stack.length; i < l; i++) {
if (stack[i] === callback){
stack.splice(i, 1);
return;
}
}
};
EventTarget.prototype.dispatchEvent = function(event) {
if (!(event.type in this.listeners)) {
return true;
}
var stack = this.listeners[event.type].slice();
for (var i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, event);
}
return !event.defaultPrevented;
};Node は、多くの DOM 型が継承するインターフェイスであり、これらのさまざまな型を同様に処理 (またはテスト) できるようにします。 Node は、多くの DOM タイプを継承するインターフェイスであり、これらのさまざまなタイプを同様に処理 (またはテスト) できるようにします。
Document、Element、CharacterData (Text、Comment、および CDATASection が継承する)、Processingstruction、DocumentFragment、DocumentType、Notation、Entity、EntityReference
追記: メソッドとプロパティが関連しない特定のケースでは、これらのインターフェイスは null を返す場合があります。たとえば、子ノードの存在を許可していないノードに子ノードを追加する場合などに、例外がスローされることがあります。
ベース URL を表す DOMString を返します。言語ごとにベース URL の概念が異なります。 HTML では、ベース URL はプロトコルとドメイン名に加えて、最後の「/」までのファイル ディレクトリを表します。
このノードのすべての子ノードを含むリアルタイムの NodeList を返します。 NodeList は「リアルタイム」です。つまり、ノードの子ノードが変更されると、NodeList オブジェクトが自動的に更新されます。
このノードの最初の子ノードを返します。ノードに子ノードがない場合は null を返します。
このノードの最後の子ノードを返します。ノードに子ノードがない場合は null を返します。
一部のノードインターフェース属性はここでは省略されていますが、その他の属性はここで見つけることができます。
ここからが重要なポイントです！
キーポイント: addEventListener、removeEventListener、dispatchEvent およびその他のメソッドを親クラス EventTarget から継承します。
指定された親ノードの子ノードリストの末尾にノードを追加します。
は、受信ノードがノードの子孫ノードであるかどうかを示すブール値を返します。
このメソッドが呼び出されたノードのコピーを返します。
一部の Node インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。
Element は非常に一般的な基本クラスであり、Document オブジェクトの下にあるすべてのオブジェクトはそれを継承します。このインターフェイスは、同じ種類のすべての要素に共通のメソッドとプロパティを記述します。 これらのインターフェイスは Element から継承し、特定の動作を記述するための追加機能を追加します。
追記: HTMLElement インターフェースはすべての HTML 要素の基本インターフェースであり、SVGElement インターフェースはすべての SVG 要素の基本インターフェースです。
XUL などの Web 以外の言語では、XULElement の API を通じて実装することもできます。
すべてのプロパティは、祖先インターフェイス Node とそれが拡張する EventTarget インターフェイスから継承し、次の部分からプロパティ ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable を継承します。
対応する要素 HTMLSlotElement を返します。インターフェース
は要素 NamedNodeMap に関連するすべての属性のコレクションを返します
は DOMTokenList である要素に含まれるクラス属性を返します
ここからが重要なポイントです！
その親クラス (Node) とその親クラスの親クラス (EventTarget) からメソッドを継承し、parentNode、ChildNode、NonDocumentTypeChildNode、Animatable を実装します。
一部の Element インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。
メソッドは、特定のセレクターに一致し、現在の要素に最も近い祖先要素を取得するために使用されます (現在の要素自体である場合もあります)。一致するものが見つからない場合は、null が返されます。
要素の指定された属性値を返します。指定されたプロパティが存在しない場合は、null または "" (空の文字列) を返します。
はパラメータ内のクラスのリストを与え、これらのクラスを保持するすべての子孫要素を含む動的 HTMLCollection を返します。
一部の Element インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。
HTMLElement インターフェイスは、すべての HTML 要素を表します。一部の HTML 要素は HTMLElement インターフェイスを直接実装し、その他は間接的に HTMLElement インターフェイスを実装します。
ここからが重要なポイントです。
親インターフェースElementおよびGlobalEventHandlersから継承されたプロパティ。
HTMLElement.accessKey DOMString 要素アクセスのショートカット キーを取得/設定します
HTMLElement.accessKeyLabel DOMString 要素アクセスのショートカット キーを含む文字列を返します (読み取り専用)
HTMLElement.contentEditable DOMString 要素の編集可能ステータスを取得/設定します
HTMLElement .isContentEditable Boolean 要素のコンテンツが編集可能かどうかを示します (読み取り専用)
一部の HTMLElement インターフェイス プロパティはここでは省略されています。その他のメソッドについては、こちらを参照してください。
HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.click( ) void 要素のクリック イベントをトリガーします
HTMLElement.focus() void 要素がフォーカスを取得します
HTMLElement.forceSpellCheck() void
一部の GlobalEventHandlers インターフェイス プロパティはここでは省略されています。その他のメソッドについては、ここを参照してください。
例:
HTMLpElement インターフェースは、p 要素を操作するためのいくつかの特別な属性を提供します (通常の HTMLElement インターフェースも継承します)。
HTMLFormElement インターフェイスは、HTMLElement インターフェイスのメソッドとプロパティを継承して
以上が完全な HTML オブジェクトはどのようなものですか?また、それを生成する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
