What is DOM?

The DOM (Document Object Model) is an API for rendering and interacting with any HTML or XML Document. The DOM is a model of the document loaded into the browser that represents the document as a tree of nodes, each representing the constituent parts of the document.

Simply put, DOM is a set of apis (interfaces). It views a structured document as a tree composed of various nodes, the node tree. DOM is not designed specifically for HTML; it is a general-purpose standard designed for all markup languages.

DOM level

DOM levels can be divided into four levels: DOM0, DOM1, DOM2, and DOM3. The DOM level is essentially a standard iteration, with versions called ES5 and ES6.

Level 1, DOM0

DOM was not standardized by the W3C.

2, DOM1 level

It became a W3C standard in October 1998 and is known as DOM1 class. The DOM1 level consists of two modules: DOM Core and DOM HTML. The DOM core specifies how to map xmL-based document structures to simplify access to and manipulation of any part of the document. The DOM HTML module extends the DOM core by adding htML-specific objects and methods.

Level 3, DOM2

The DOM1 level is extended. Added more methods and attributes to the node. Add new modules, including: view, event, scope, traversal, style, etc.

4, the DOM3 class

The DOM3 level further extends the DOM, adding XPath modules, DOM Load and Save modules, and more, to support the XML1.0 specification.

DOM events

As the DOM level changes, so do DOM events. DOM events are divided into three levels: DOM0-level event processing, Dom2-level event processing, and Dom3-level event processing.

No DOM1-level event exists because dom1-level events do not exist.

1. Dom0-level events

Dom0-level event handling assigns a function to an event handling property.

<button id="btn" type="button"></button> 
 
var btn = document.getElementById('btn')
btn.onclick = function() { 
    console.log('Hello World')}Methods such as assigning a function to an event handler property onclick are DOM0 level.
// Events can be unbound by assigning null to the event handler property.
Copy the code

2. Dom2-level events

Dom2-level event handling is the addition of some handlers to dom0-level event handling.

  • You can bind multiple event handlers at the same time.
  • Defines theaddEventListener 和 removeEventListenerTwo methods.
element.addEventListener(eventName, fn, useCapture)
// The third parameter useCapture: specifies whether the event is executed in the capture or bubble phase. Boolean value, optional, false by default
// Possible values: true - The event handle executes during the capture phase; False - the default. The event handle executes during the bubbling phase
Copy the code
<button id="btn" type="button"></button> 
 
var btn = document.getElementById('btn')
function showFn() { 
    alert('Hello World')}function LogFn() { 
    alert('Hello World')}// Bind multiple event handlers simultaneously
btn.addEventListener('click', showFn);
btn.addEventListener('click', LogFn);

// Unbind events
btn.removeEventListener('click', showFn); 
Copy the code

3. DOM3 level events

Dom3-level event handling is the addition of many event types to dom2-level event handling.

  • UI events, which are triggered when the user interacts with elements on the page, such as:load,scroll
  • Focus events, which are triggered when an element gains or loses focus, such as:blur,focus
  • Mouse events are triggered when a user performs an operation on a page using the mouse. For example:dbclick,mouseup
  • A scroll wheel event that is triggered when a mouse wheel or similar device is used, such as:mousewheel
  • Text events that are triggered when text is entered into a document, such as:textInput
  • Keyboard events that are triggered when the user performs an action on the page using the keyboard, such as:keydown,keypress
  • Synthesized event that fires when a character is entered for the IME (input method editor), such as:compositionstart
  • Change events, which are triggered when the underlying DOM structure changes, such as:DOMsubtreeModified

DOM3 events also allow users to customize some events.

4. DOM event flow

Dom2-level events specify that an event flow includes three stages: event capture stage, target stage and event bubbling stage.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The event bubbling</title>
</head>
<body>
  <div id="parent">I'm the parent element<span id="son">I'm a child</span>
  </div>
</body>
<script type="text/javascript">
var parent = document.getElementById('parent');
var son = document.getElementById('son');

parent.addEventListener('click'.() = > {
  alert('Parent bubble');
}, false);
parent.addEventListener('click'.() = > {
  alert('Parent capture');
}, true);
son.addEventListener('click'.() = > {
  alert('Child capture');
}, true);
son.addEventListener('click'.() = > {
  alert('Sub-bubble');
}, false);
</script>
</html>
Copy the code
  • When clicking on the parent element: Parent bubble -> Parent capture
  • When clicking on the child element: Parent capture -> child capture -> child bubble -> Parent bubble

conclusion

The order of execution of the event flow is: event capture stage -> In target stage -> event bubble stage, and when the event is in target stage, the order of event invocation depends on the order in which the binding events are written.

Note that IE8 does not support addEventlistener and removeEventListerner. You need to use attachEvent and detachEvent.

// Bind events
btn.attachEvent('onclick', fn); 
// Unbind events
btn.detachEvent('onclick', fn); 

// There is no need to pass in the third argument because IE8 versions below only support bubbling events.
Copy the code