A quoi ressemble un objet HTML complet et comment le générer ?

Pour les objets html, il faut d'abord mentionner le nœud Node. Node est une interface De nombreux types DOM héritent de cette interface et permettent de traiter (ou tester) de manière similaire. Existe-t-il des interfaces dont Node hérite de ses méthodes et propriétés ? Lisons d’abord cet article. apache php mysql

Pourquoi écrire cet article ?

Vous faites peut-être du développement Web depuis un certain temps. Avez-vous déjà réfléchi aux questions suivantes ?
Pourquoi l'élément p ou même tous les éléments HTML peuvent-ils utiliser addEventListener pour ajouter des événements ?
Pourquoi chaque nœud DOM a-t-il des attributs tels que parentNode, firstChild, nodeType, etc. ?
Pourquoi chaque élément DOM a-t-il des attributs tels que className, classList, innerHTML, etc. ?
Pourquoi certains éléments du DOM ont-ils des attributs tels que accessKey, contentEditable, isContentEditable, etc. ?
Pourquoi chaque élément DOM a-t-il des attributs onclick, ondblclick, ondrag et autres ?
Cet article a pour but de répondre à ces questions simples mais pas « simples ».

EventTarget

Définition

EventTarget est une interface implémentée par des objets qui peuvent recevoir des événements, et des auditeurs peuvent être créés pour eux.

Rôle

L'élément, le document et la fenêtre sont les cibles d'événements les plus courantes, mais d'autres objets peuvent également être des cibles d'événements, tels que XMLHttpRequest, AudioNode, AudioContext, etc.
De nombreuses cibles d'événements (y compris les éléments, les documents et les fenêtres) prennent également en charge la définition de gestionnaires d'événements via les attributs et attributs onXXX (tels que onclick).

Les méthodes de cette interface

EventTarget.addEventListener()

Enregistrez un gestionnaire d'événements pour un type d'événement spécifique sur EventTarget.

EventTarget.removeEventListener()

Supprimez l'écouteur d'événement de EventTarget.

EventTarget.dispatchEvent()

Distribue les événements à cet EventTarget.

Nous implémentons EventTarget nous-mêmes

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

Définition

Node est une interface dont héritent de nombreux types de DOM et permet des choses comme Process ( ou tester) ces différents types. Node est une interface dont héritent de nombreux types DOM et permet à ces différents types d'être gérés (ou testés) de la même manière.

Existe-t-il des interfaces dont Node hérite de ses méthodes et propriétés ?

Document, Element, CharacterData (dont Text, Comment et CDATASection héritent), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS : dans les cas spécifiques où les méthodes et les propriétés ne sont pas liées, ces L'interface peut renvoyer null. Ils peuvent lever des exceptions - par exemple, lors de l'ajout d'un nœud enfant à un nœud qui n'autorise pas l'existence de nœuds enfants.

Attributs et méthodes liés à l'interface

Attributs

Node.baseURI

Renvoie une DOMString représentant l'URL de base. Le concept d'URL de base dans différentes langues est différent. En HTML, l'URL de base représente le protocole et le nom de domaine, ainsi que le répertoire du fichier jusqu'au dernier '/'.

Node.childNodes

Renvoie une NodeList en temps réel contenant tous les nœuds enfants de ce nœud. NodeList est « en temps réel », ce qui signifie que si les nœuds enfants du nœud changent, l'objet NodeList sera automatiquement mis à jour.

Node.firstChild

Renvoie le premier nœud enfant de ce nœud, ou null si le nœud n'a pas de nœud enfant.

Node.lastChild

Renvoie le dernier nœud enfant de ce nœud, ou null si le nœud n'a pas de nœud enfant.
Certains attributs de l'interface Node sont omis ici, et d'autres attributs peuvent être trouvés ici.

Méthode

Voici le point !
Points clés : Il hérite des méthodes addEventListener, removeEventListener, dispatchEvent et d'autres méthodes de sa classe parent EventTarget.

Node.appendChild()

Ajoute un nœud à la fin de la liste des nœuds enfants du nœud parent spécifié.

Node.contains()

renvoie une valeur booléenne pour indiquer si le nœud entrant est un nœud descendant du nœud.

Node.cloneNode()

Renvoie une copie du nœud sur lequel cette méthode a été appelée.
Certaines méthodes d'interface Node sont omises ici, d'autres méthodes peuvent être trouvées ici.

Element

Description

Element est une classe de base très générale, et tous les objets sous l'objet Document en héritent. Cette interface décrit les méthodes et propriétés communes à tous les éléments de même nature. Ces interfaces héritent d'Element et ajoutent des fonctionnalités supplémentaires pour décrire des comportements spécifiques.
PS : L'interface HTMLElement est l'interface de base pour tous les éléments HTML, et l'interface SVGElement est l'interface de base pour tous les éléments SVG.
Dans des langages autres que le web, comme XUL, vous pouvez également l'implémenter via l'API de XULElement.

Attributs

Tous les attributs héritent de son interface ancêtre Node et de l'interface qu'il étend EventTarget, et hérite des attributs de ParentNode, ChildNode, NonDocumentTypeChildNode et Animatable.

Element. assignéSlot

Renvoie l'interface HTMLSlotElement correspondant à l'élément

Element.attributes

Renvoie une collection de tous les attributs liés à l'élément NamedNodeMap

Element.classList

L'attribut de classe renvoyé par cet élément est une DOMTokenList.

Element.className

C'est une DOMString représentant la classe de cet élément.
Ici, omettez certains éléments. propriétés de l'interface, voir ici pour plus de méthodes.

Méthode

Voici le point !
Hérite des méthodes de sa classe parent (Node) et de la classe parent de sa classe parent (EventTarget), et implémente parentNode, ChildNode, NonDocumentTypeChildNode et Animatable.
Certaines méthodes d'interface Element sont omises ici, d'autres méthodes peuvent être trouvées ici. La méthode

Element.closest()

est utilisée pour obtenir l'élément ancêtre qui correspond à un sélecteur spécifique et est le plus proche de l'élément actuel (il peut également s'agir de l'élément actuel lui-même). Si aucune correspondance n'est trouvée, null est renvoyé.

Element.getAttribute()

Renvoie la dernière valeur d'attribut spécifiée sur l'élément. Si la propriété spécifiée n'existe pas, renvoie null ou "" (chaîne vide).

Element.getElementsByClassName()

La liste des classes est donnée dans le paramètre, et une HTMLCollection dynamique est renvoyée, qui contient tous les éléments descendants détenant ces classes.
Certaines méthodes d'interface Element sont omises ici, d'autres méthodes peuvent être trouvées ici.

HTMLElement

Fonction

L'interface HTMLElement représente tous les éléments HTML. Certains éléments HTML implémentent directement l'interface HTMLElement, d'autres implémentent indirectement l'interface HTMLElement.

Attributs

Alors voici le point important !
Propriétés héritées de l'interface parent Element et GlobalEventHandlers.
HTMLElement.accessKey DOMString Obtient/définit la touche de raccourci pour l'accès à l'élément
HTMLElement.accessKeyLabel DOMString Renvoie une chaîne contenant la touche de raccourci pour l'accès à l'élément (lecture seule)
HTMLElement.contentEditable DOMString Obtient/définit la touche de raccourci de l'élément access key Editing status
HTMLElement.isContentEditable Boolean Indique si le contenu de l'élément est modifiable (lecture seule)
Plusieurs attributs d'interface HTMLElement sont omis ici, voir ici pour plus de méthodes.

Gestionnaires d'événements

htmlelement.ontouchStart

htmlelement.ontouchend
htmlelement.ontouchMove
htmlelement.ontouch> TouchLeave
htmleice.ontouchCancel

Méthodes

HTMLElement.blur() void L'élément perd le focus

HTMLElement.click() void Déclenche l'événement click de l'élément

HTMLElement.focus() void L'élément obtient le focus
HTMLElement. forceSpellCheck() void

GlobalEventHandlers

Definition

L'interface GlobalEventHandlers décrit plusieurs interfaces courantes pour les gestionnaires d'événements tels que HTMLElement, file, window ou WorkerGlobalScope Web Workers. Ces interfaces peuvent implémenter davantage de gestionnaires d'événements.

Propriétés

GlobalEventHandlers.onabort

Événements d'interruption.

GlobalEventHandlers.onblur

Événement de perte de focus.

GlobalEventHandlers.onfocus

Obtenez l'événement focus.

Certaines propriétés de l'interface GlobalEventHandlers sont omises ici. Pour plus de méthodes, voir ici.

Interface des éléments

Cette interface est utilisée pour créer les éléments correspondants.

Par exemple :

L'interface HTMLpElement fournit des attributs spéciaux (elle hérite également de l'interface HTMLElement habituelle) pour opérer sur l'élément p.
L'interface HTMLFormElement peut créer ou modifier des objets

; elle hérite des méthodes et propriétés de l'interface HTMLElement.
L'interface HTMLAnchorElement représente des éléments de lien hypertexte et fournit des propriétés et méthodes spéciales (en plus de celles héritées de l'interface d'objet HTMLElement ordinaire) pour manipuler la disposition et l'affichage de ces éléments.
......

Répondez à la question précédente

Grâce aux connaissances ci-dessus, nous comprenons :

HTMLpElement (autre interface d'élément) hérite des interfaces HTMLElement et GlobalEventHandlers.

HTMLElement hérite de l'interface Element.
Element hérite de l'interface Node.
Node hérite de l'interface EventTarget.

Pourquoi l'élément p ou même tous les éléments HTML peuvent-ils utiliser addEventListener pour ajouter des événements ?
Réponse : héritée de l'interface EventTarget. Pourquoi chaque nœud DOM a-t-il des attributs tels que parentNode, firstChild, nodeType, etc. ?
Réponse : héritée de l'interface Node.
Pourquoi chaque élément DOM a-t-il des attributs tels que className, classList, innerHTML, etc. ?
Réponse : héritée de l'interface Element.
Pourquoi certains éléments du DOM ont-ils des attributs tels que accessKey, contentEditable, isContentEditable, etc. ?
Réponse : héritée de l'interface HTMLElement.
Pourquoi chaque élément DOM a-t-il des attributs onclick, ondblclick, ondrag et autres ?
Réponse : héritée de l'interface GlobalEventHandlers.

C'est ça le but !
fin :

Uniquement grâce à la relation d'héritage ci-dessus, l'élément DOM que nous obtenons est un objet HTML complet, et nous pouvons définir/obtenir des propriétés, lier des événements, ajouter des classes de style et d'autres opérations. Articles connexes :

Comment déterminer si un objet js est un objet dom

Quel est le concept d’intégrité des bases de données ?

Vidéos associées :

Manuel de la version complète HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!