1 introduction of DOM

Document Object Model (DOM) is a standard programming interface for extensible markup language (HTML or XML). Through these interfaces, you can change the content, structure, and style of a web page.

2 Element Operations

2.1 Obtaining Elements

Document. The getElementById (' id value); / / element by ID for the document. The getElementsByTagName (' element name); / / through the element tag name for the document. The getElementsByClassName (' the name of the class '); // Get the element document.querySelector(' selector ') by the class name; / / according to specified selector returns the first element object document. QuerySelectorAll (' selector '); / / according to specified selectors return -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the document. The body; // Get the body element document.documentElement; // Get the HTML elementCopy the code

2.2 Changing element content

element.innerText
Copy the code

From the start position to the end position, but it removes HTML tags, as well as whitespace and newlines

element.innerHTML
Copy the code

All content from start to end, including HTML tags, with Spaces and line feeds

2.3 Manipulating common element attributes

SRC, title, ID, href, etc

2.4 Manipulating form element attributes

Type, Value, Checked, selected, and disabled

2.5 Manipulating element style attributes

element.style
element.className
Copy the code

2.6 Operations on User-defined Attributes

The purpose of using custom attributes

Gets the custom property value

Element. attribute // Get the built-in attribute value (the element's own attribute) element.getAttribute(' attribute ')// Mainly get the custom attribute that we programmers defineCopy the code

Set custom property values: Save and use data, some data can be directly saved in the page.

Element. attribute // Sets the built-in attribute value element.setAttribute(' attribute ')// Mainly sets custom attributesCopy the code

Delete the properties

Element. RemoveAttribute (' property ')Copy the code

3 Node Operations

3.1 Node Level

The element parent node is obtained by using node hierarchy (paternal, brotherly, and child node relationships)

Node. parentNode,, and returns the nearest parentNode, or null if there is noneCopy the code

Child nodes

FirstChild // returns the firstChild node, either text or element node node.firstElementChild // returns the first element node node.children[0] // returns the first element node, optionally returning other element childrenCopy the code

Brother nodes

Node. nextSibling // returns the nextSibling including the text node, if not found, returns null node.previousSibling // returns the last sibling including the text node, Can't find the return null node. NextElementSibling / / return a brother nodes under the current element, can't find the return null node. PreviousElementSibling / / return retaining wall element nodes on a brother, I couldn't find returns nullCopy the code

3.2 Adding, deleting, modifying, and querying nodes

Create a node

document.creatElement('tagName')
Copy the code

Add a node

Node.appendchild (child) // Adds a node to the end of all children of the specified parent node node.insertbefore (child, specified element) // adds a node before the specified children of the specified parent nodeCopy the code

Remove nodes

Node.removechild (child) // Remove a child node from the DOM and return the deleted node.Copy the code

Copy (clone) the node

Node.clonenode (false/true)// Returns a copy of the calling node. The parentheses are true for deep copy, and Spaces or false for shallow copy.Copy the code

4 events

An event is an action that can be listened for by JavaScript, known as a trigger – a response mechanism. An event consists of three parts: event source, event type, and event handler, also known as event three elements.

4.1 Registration Event

Traditional Registration

element.onclick = function () {}; //Copy the code

Event listens for registration events

Element.addeventlistener ('click',function(){}) or element.adDeventListener ('click',fn) function fn(){}Copy the code

4.2 Unbinding Events

Traditional registration event unbinding

element.onclick = function () {
    element.onclick=null
};
Copy the code

The event listens for unbinding events

 element.addEventListener('click', fn);
 function fn() {
     element.removeEventListener('click', fn);
 }
Copy the code

4.3 DOM Event Flow

Events are propagated in a specific order between element nodes, and this propagation process is called DOM event flow. DOM events are divided into three phases: 1, capture phase 2, current target phase 3, and bubble phase

element.addEventListener('click', function () {}, false);
Copy the code

Code can only perform one of the capture or bubble phases, capture when the third argument is true and bubble when the third argument is null or false. Onclick and attachEvent (IE) can only perform bubbling.

4.4 Event Objects

element.addEventListener('click',function(event){})
Copy the code

An event is an event object. As a parameter, the event object will be automatically created by the system only after the event is registered. It contains a series of event-related information. Common properties and methods are:

E.target // Returns the object that triggered the event standard E.scrElement; // Return the object that triggered the event non-standard E.type; // Return the type of the event, such as click e.cancelbubble; // Prevent bubbling, non-standard, ie6-8 uses E.returnValue; // Block default events, non-standard, ie6-8 uses e.preventDefault(); // Block default events, standard e.topPropagation (); // Prevent bubbling, standardCopy the code

E.target returns the object (element) that triggered the event

This returns the object (element) to which the event is bound

4.5 Event Delegation

Event delegates, also known as event proxies, are called event delegates in jquery. Instead of setting event listeners on each child node individually, they set event listeners on their parent nodes and then influence each child node using the bubbling principle.

4.6 Event Objects

Mouse event object

click
mouseover
mouseout
blur
Copy the code

Mouse event properties

E. pagex // Returns the x-coordinate of the mouse relative to the browser's visual window e.pagey // Returns the y-coordinate of the mouse relative to the browser's visual window e.clientx // Returns the x-coordinate of the mouse relative to the document page e.clienty // Returns the y-coordinate of the mouse relative to the document page E.screnx // Returns the x-coordinate of the mouse relative to the computer screenCopy the code

Keyboard event object

Keyup // Triggered when the keyboard is released KeyDown // Triggered when the keyboard is pressed keyPress // Triggered when the keyboard is pressed, does not recognize function keys such as Shift, CTRL, etc., but is case-sensitive.Copy the code

The three events are executed in the order keydown-keypress-keyup