完全な HTML オブジェクトはどのようなものですか?また、それを生成する方法は何ですか?

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

定義

EventTarget は、イベントを受信できるオブジェクトによって実装されるインターフェイスであり、イベントに対してリスナーを作成できます。

Role

要素、ドキュメント、ウィンドウは最も一般的なイベント ターゲットですが、XMLHttpRequest、AudioNode、AudioContext などの他のオブジェクトもイベント ターゲットになる可能性があります。
多くのイベント ターゲット (要素、ドキュメント、ウィンドウを含む) は、onXXX (onclick など) 属性および属性を介したイベント ハンドラーの設定もサポートしています。

このインターフェースのメソッド

EventTarget.addEventListener()

EventTarget の特定のイベント タイプのイベント ハンドラーを登録します。

EventTarget.removeEventListener()

EventTarget のイベント リスナーを削除します。

EventTarget.dispatchEvent()

イベントをこの 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

Definition

Node は、多くの DOM 型が継承するインターフェイスであり、これらのさまざまな型を同様に処理 (またはテスト) できるようにします。 Node は、多くの DOM タイプを継承するインターフェイスであり、これらのさまざまなタイプを同様に処理 (またはテスト) できるようにします。

Node がメソッドやプロパティから継承するインターフェイスはありますか?

Document、Element、CharacterData (Text、Comment、および CDATASection が継承する)、Processingstruction、DocumentFragment、DocumentType、Notation、Entity、EntityReference
追記: メソッドとプロパティが関連しない特定のケースでは、これらのインターフェイスは null を返す場合があります。たとえば、子ノードの存在を許可していないノードに子ノードを追加する場合などに、例外がスローされることがあります。

インターフェイス関連のプロパティとメソッド

プロパティ

Node.baseURI

ベース URL を表す DOMString を返します。言語ごとにベース URL の概念が異なります。 HTML では、ベース URL はプロトコルとドメイン名に加えて、最後の「/」までのファイル ディレクトリを表します。

Node.childNodes

このノードのすべての子ノードを含むリアルタイムの NodeList を返します。 NodeList は「リアルタイム」です。つまり、ノードの子ノードが変更されると、NodeList オブジェクトが自動的に更新されます。

Node.firstChild

このノードの最初の子ノードを返します。ノードに子ノードがない場合は null を返します。

Node.lastChild

このノードの最後の子ノードを返します。ノードに子ノードがない場合は null を返します。
一部のノードインターフェース属性はここでは省略されていますが、その他の属性はここで見つけることができます。

方法

ここからが重要なポイントです！
キーポイント: addEventListener、removeEventListener、dispatchEvent およびその他のメソッドを親クラス EventTarget から継承します。

Node.appendChild()

指定された親ノードの子ノードリストの末尾にノードを追加します。

Node.contains()

は、受信ノードがノードの子孫ノードであるかどうかを示すブール値を返します。

Node.cloneNode()

このメソッドが呼び出されたノードのコピーを返します。
一部の Node インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。

Element

Description

Element は非常に一般的な基本クラスであり、Document オブジェクトの下にあるすべてのオブジェクトはそれを継承します。このインターフェイスは、同じ種類のすべての要素に共通のメソッドとプロパティを記述します。 これらのインターフェイスは Element から継承し、特定の動作を記述するための追加機能を追加します。
追記: HTMLElement インターフェースはすべての HTML 要素の基本インターフェースであり、SVGElement インターフェースはすべての SVG 要素の基本インターフェースです。
XUL などの Web 以外の言語では、XULElement の API を通じて実装することもできます。

プロパティ

すべてのプロパティは、祖先インターフェイス Node とそれが拡張する EventTarget インターフェイスから継承し、次の部分からプロパティ ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable を継承します。

Element.assignedSlot

対応する要素 HTMLSlotElement を返します。インターフェース

Element.attributes

は要素 NamedNodeMap に関連するすべての属性のコレクションを返します

Element.classList

は DOMTokenList である要素に含まれるクラス属性を返します

これは DOMString です。表現 この要素のクラス。

一部の要素インターフェイス属性はここでは省略されています。その他のメソッドについては、こちらを参照してください。

方法

ここからが重要なポイントです！
その親クラス (Node) とその親クラスの親クラス (EventTarget) からメソッドを継承し、parentNode、ChildNode、NonDocumentTypeChildNode、Animatable を実装します。
一部の Element インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。

Element.closest()

メソッドは、特定のセレクターに一致し、現在の要素に最も近い祖先要素を取得するために使用されます (現在の要素自体である場合もあります)。一致するものが見つからない場合は、null が返されます。

Element.getAttribute()

要素の指定された属性値を返します。指定されたプロパティが存在しない場合は、null または "" (空の文字列) を返します。

Element.getElementsByClassName()

はパラメータ内のクラスのリストを与え、これらのクラスを保持するすべての子孫要素を含む動的 HTMLCollection を返します。
一部の Element インターフェイス メソッドはここでは省略されていますが、その他のメソッドはここで見つけることができます。

HTMLElement

Function

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

Methods

HTM LElement.blur() void 要素は失われますfocus

HTMLElement.click( ) void 要素のクリック イベントをトリガーします
HTMLElement.focus() void 要素がフォーカスを取得します
HTMLElement.forceSpellCheck() void

GlobalEventHandlers

Definition

GlobalEventHandlers インターフェイスは、HTMLElement、ファイル、ウィンドウなどのイベント ハンドラーのいくつかの共通インターフェイスを説明します、または WorkerGlobalScope Web ワーカー。これらのインターフェイスは、より多くのイベント ハンドラーを実装できます。

プロパティ

GlobalEventHandlers.onabort

イベントを中断します。

GlobalEventHandlers.onblur

フォーカスを失ったイベント。

GlobalEventHandlers.onfocus

フォーカス イベントを取得します。

一部の GlobalEventHandlers インターフェイス プロパティはここでは省略されています。その他のメソッドについては、ここを参照してください。

要素インターフェース

このインターフェースは、対応する要素を作成するために使用されます。

例:
HTMLpElement インターフェースは、p 要素を操作するためのいくつかの特別な属性を提供します (通常の HTMLElement インターフェースも継承します)。
HTMLFormElement インターフェイスは、HTMLElement インターフェイスのメソッドとプロパティを継承して

オブジェクトを作成または変更できます。
HTMLAnchorElement インターフェイスはハイパーリンク要素を表し、これらの要素のレイアウトと表示を操作するためのいくつかの特別なプロパティとメソッド (通常の HTMLElement オブジェクト インターフェイスから継承されたものに加えて) を提供します。
......
前の質問に答えてください

上記の知識を通じて、次のことが理解できます。

HTMLpElement (他の要素インターフェイス) は HTMLElement インターフェイスと GlobalEventHandlers インターフェイスを継承します。
HTMLElement は Element インターフェースを継承します。
要素はNodeインターフェースを継承します。
Node は EventTarget インターフェースを継承します。

p 要素、さらにはすべての html 要素で addEventListener を使用してイベントを追加できるのはなぜですか? 回答: EventTarget インターフェイスから継承されます。
各 DOM ノードにparentNode、firstChild、nodeType などの属性があるのはなぜですか?
回答: Node インターフェースから継承されます。
すべての DOM 要素に className、classList、innerHTML などの属性があるのはなぜですか?
回答: Element インターフェイスから継承されます。
一部の DOM 要素に accessKey、contentEditable、isContentEditable などの属性があるのはなぜですか?
回答: HTMLElement インターフェースから継承されます。
すべての DOM 要素に onclick、ondblclick、ondrag などの属性があるのはなぜですか?
回答: GlobalEventHandlers インターフェイスから継承されます。

そして重要なポイントが来ます！

end:

上記の継承関係を通じてのみ、取得する DOM 要素は完全な HTML オブジェクトであり、属性の設定/取得、イベントのバインド、スタイル クラスの追加、およびその他の操作を行うことができます。

関連記事:

js オブジェクトが dom オブジェクトかどうかを判断する方法

データベースの整合性の概念とは何ですか?

関連ビデオ:

HTML5 完全版マニュアル

以上が完全な HTML オブジェクトはどのようなものですか?また、それを生成する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。