What does a complete HTML object look like and how to generate it?

For html objects, we must first mention the Node node. Node is an interface. Many DOM types inherit from this interface and allow these various types to be processed (or tested) similarly. Are there any interfaces that Node inherits from its methods and properties? Let’s read this article first. apache php mysql

Why write this article?

You may have been doing web development for a while. Have you ever thought about the following questions?
Why can the p element or even all html elements use addEventListener to add events?
Why does each DOM node have attributes such as parentNode, firstChild, nodeType, etc.?
Why does each DOM element have attributes such as className, classList, innerHTML, etc.?
Why do some DOM elements have attributes such as accessKey, contentEditable, isContentEditable, etc.?
Why does each DOM element have onclick, ondblclick, ondrag and other attributes?
This article is to answer these simple but not "simple" questions.

EventTarget

Definition

EventTarget is an interface implemented by objects that can receive events and create listeners for them.

Function

Element, document and window are the most common event targets, but other objects can also be event targets, such as XMLHttpRequest, AudioNode, AudioContext, etc.
Many event targets (including elements, documents, and windows) also support setting event handlers through onXXX (such as onclick) attributes and properties.

Methods of this interface

EventTarget.addEventListener()

Register an event handler for a specific event type on EventTarget.

EventTarget.removeEventListener()

Remove the event listener from EventTarget.

EventTarget.dispatchEvent()

Dispatch events to this EventTarget.

We implement EventTarget ourselves

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 is an interface from which many DOM types inherit and allow to be handled similarly ( or test) these various types. Node is an interface from which many DOM types inherit and allows these various types to be handled (or tested) similarly.

Are there any interfaces that Node inherits from its methods and properties?

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS: In specific cases where methods and properties are not related, these The interface may return null. They may throw exceptions - for example, when adding a child node to a node that does not allow child nodes to exist.

Interface related properties and methods

Properties

Node.baseURI

Returns a DOMString representing the base URL. The concept of base URL in different languages ​​is different. In HTML, base URL represents the protocol and domain name, as well as the file directory until the last '/'.

Node.childNodes

Returns a real-time NodeList containing all child nodes of this node. NodeList is "real-time" meaning that if the node's child nodes change, the NodeList object will automatically update.

Node.firstChild

Returns the first child node of the node, or null if the node has no child nodes.

Node.lastChild

Returns the last child node of the node, or null if the node has no child nodes.
Some Node interface attributes are omitted here, and more attributes can be found here.

Method

Then the point is here!
Key points: It inherits the addEventListener, removeEventListener, dispatchEvent and other methods from its parent class EventTarget.

Node.appendChild()

Adds a node to the end of the child node list of the specified parent node.

Node.contains()

Returns a Boolean value to indicate whether the incoming node is a descendant node of the node.

Node.cloneNode()

Returns a copy of the node that called this method.
Some Node interface methods are omitted here, more methods can be found here.

Element

Description

Element is a very general base class, and all objects under the Document object inherit it. This interface describes methods and properties that are common to all elements of the same kind. These interfaces inherit from Element and add some additional functionality to describe specific behaviors.
PS: The HTMLElement interface is the basic interface for all HTML elements, and the SVGElement interface is the basic interface for all SVG elements.
In languages ​​other than the web, like XUL, you can also implement it through the API of XULElement.

Properties

All properties inherit from its ancestor interface Node, and the interface it extends EventTarget, and inherit the properties ParentNode, ChildNode, NonDocumentTypeChildNode, and Animatable from the following parts.

Element.assignedSlot

Returns the HTMLSlotElement interface corresponding to the element

Element.attributes

Returns a collection of all attributes related to the element NamedNodeMap

Element.classList

The class attribute returned by the element is a DOMTokenList.

Element.className

It is a DOMString representing the class of this element.
Here Omit some Element interface properties, see here for more methods.

Method

Then the point is here!
Inherits methods from its parent class (Node) and its parent class's parent class (EventTarget), and implements parentNode, ChildNode, NonDocumentTypeChildNode, and Animatable.
Some Element interface methods are omitted here, more methods can be found here.

Element.closest()

The method is used to get the ancestor element that matches a specific selector and is closest to the current element (it can also be the current element itself). If no match is found, null is returned.

Element.getAttribute()

Returns the last specified attribute value on the element. If the specified property does not exist, returns null or "" (empty string).

Element.getElementsByClassName()

The list of classes is given in the parameter, and a dynamic HTMLCollection is returned, which contains all descendant elements holding these classes.
Some Element interface methods are omitted here, more methods can be found here.

HTMLElement

Function

The HTMLElement interface represents all HTML elements. Some HTML elements directly implement the HTMLElement interface, others indirectly implement the HTMLElement interface.

Attributes

Then the point is here!
Properties inherited from the parent interface Element and GlobalEventHandlers.
HTMLElement.accessKey DOMString Gets/sets the shortcut key for element access
HTMLElement.accessKeyLabel DOMString Returns a string containing the shortcut key for element access (read-only)
HTMLElement.contentEditable DOMString Gets/sets the element's access key Editing status
HTMLElement.isContentEditable Boolean Indicates whether the content of the element is editable (read-only)
Several HTMLElement interface properties are omitted here, see here for more methods.

Event handlers

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.onTouchCancel

Method

HTMLElement.blur() void The element loses focus
HTMLElement.click() void Triggers the click event of the element
HTMLElement.focus() void The element gains focus
HTMLElement. forceSpellCheck() void

GlobalEventHandlers

Definition

The GlobalEventHandlers interface describes several common interfaces for event handlers like HTMLElement, file, window, or WorkerGlobalScope Web Workers. These interfaces can implement more event handlers.

Properties

GlobalEventHandlers.onabort

Interrupt events.

GlobalEventHandlers.onblur

Lost focus event.

GlobalEventHandlers.onfocus

Get the focus event.
Some GlobalEventHandlers interface properties are omitted here, more methods can be found here.

Element interface

This interface is used to create corresponding elements.
For example:
The HTMLpElement interface provides some special attributes (it also inherits the usual HTMLElement interface) to operate the p element.
HTMLFormElement interface can create or modify

objects; it inherits the methods and properties of HTMLElement interface.
The HTMLAnchorElement interface represents hyperlink elements and provides some special properties and methods (in addition to those inherited from the ordinary HTMLElement object interface) for manipulating the layout and display of these elements.
......

Answer the previous question

Through the above knowledge, we understand:
HTMLpElement (other element interface) inherits the HTMLElement and GlobalEventHandlers interfaces.
HTMLElement inherits the Element interface.
Element inherits the Node interface.
Node inherits the EventTarget interface.
Why can the p element or even all html elements use addEventListener to add events?
Answer: Inherited from the EventTarget interface.
Why does each DOM node have attributes such as parentNode, firstChild, nodeType, etc.?
Answer: Inherited from the Node interface.
Why does each DOM element have attributes such as className, classList, innerHTML, etc.?
Answer: Inherited from the Element interface.
Why do some DOM elements have attributes such as accessKey, contentEditable, isContentEditable, etc.?
Answer: Inherited from the HTMLElement interface.
Why does each DOM element have onclick, ondblclick, ondrag and other attributes?
Answer: Inherited from the GlobalEventHandlers interface.
Then the point is here!

#end: Only through the above inheritance relationship, the DOM element we get is a complete HTML object, and we can set/get attributes, bind events, Add style classes and other operations.

Related articles:

How to determine whether a js object is a dom object

What is the concept of database integrity?

Related videos:

HTML5 Complete Manual

The above is the detailed content of What does a complete HTML object look like and how to generate it?. For more information, please follow other related articles on the PHP Chinese website!