This is the fourth day of my participation in the August Text Challenge.More challenges in August

preface

In today’s world of frameworks and tools, many students may be disrespectful of the DOM, but if you’re looking for a good team at a medium-sized or large company, or a small team with a slightly more technical mindset, you can’t avoid being exposed to the basics and underlying principles of the DOM during the interview

We’ll start with a round of DOM literacy.

Understanding DOM

TIP 👉 Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of a document and defines a way for that structure to be accessed from within the program to change the structure, style, and content of the document. DOM parses a document as a structured collection of nodes and objects (objects that contain properties and methods). In short, it connects a Web page to a script or programming language. – the MDN

The CONCEPT of DOM may seem abstract, but it is really just an object wrapped around the elements defined by the various tags in HTML. The purpose of this is to ensure that developers can manipulate HTML through JAVASCRIPT scripts.

The DOM tree parsing

The DOM structure exists as a tree. Before we get to know the tree, we should first recognize the smallest unit in the tree — the node. In the DOM, each element is a node, and there are many different types of nodes,

  1. Document

Every HTML Document loaded into the browser becomes a Document object.

  1. Element

Element refers to the tags in an HTML file. Various HTML tags, such as

and

, define elements of the Element type.

  1. Text

A Text is a Text that is wrapped around each tag, for example:

<span>Ha, ha, ha</span>
Copy the code

The “hahaha” here is the Text of this Element

  1. Attribute

The Attribute type represents the attributes of an element. In technical terms, attributes here mean attributes in individual tags

DOM manipulation methods

  1. Finding DOM nodes
- getElementId // Query by id
- getElementsByTagName // Query by label name
- getElementsByClassName // Query by class name
- querySelectorAll // Matches all elements of the specified CSS selector
Copy the code
  1. Creating a DOM Node
- createElement // Create a node
- createAttribute // Create a new properties node
- createTextNode // Create a new text node
- setAttribute // Create a new attribute for an element
Copy the code
  1. Deleting a DOM Node
- removeChild // Delete a node
Copy the code
  1. Modifying DOM Nodes
- innerHTML // Change the element content- setAttribute Changes HTML attributes - insertBefore inserts before - replaceChild replaces child elementsCopy the code

DOM event system

The W3C standard dictates that an event propagate through the following three phases:

1. Event capture phase

2. Goal stage

3. Event bubbling phase

When an event is triggered, it first goes through a capture process: the event “shuttles” from the outermost element to the innermost element. This shuttling process continues until the event reaches the element it is targeting (that is, the element that actually triggers the event). At this point, the event flow switches to the “target phase” where the event is received by the target element. The event then “bounces back” into the bubbling phase — it “goes upstream” the way it came, layer by layer, back again.

The event object

  1. currentTarget

The event attribute returns the node whose listener fired the event, that is, the element, document, or window that is currently processing the event.

  1. target

The component property returns the target node of the event (the node that triggered the event), such as the element, document, or window that generated the event

  1. preventDefault

Notifies the Web browser not to perform the default action associated with the event

  1. stopPropagation

This method is used to terminate further propagation of events during the capture, target processing, or bubbling phases of propagation.

DOM custom events

  1. addEventListener

The addEventListener() method is used to add an event handle to the specified element.

document.getElementById("myBtn").addEventListener("click".function(){\
    document.getElementById("demo").innerHTML = "Hello green Lotus messenger.";
});
Copy the code

target.addEventListener(type, listener, useCapture);

AddEventListener When useCapture is set to true, events that bubble up the DOM tree will not trigger the Listener. UseCapture defaults to false, meaning capture

DOM event application

  1. The event agent

Summary: According to capture and bubble, if we have many elements that are handled in a similar way, we don’t have to assign an event handler to each element — instead, we place individual handlers on their common ancestor.

Advantages:

  • Reduce memory usage (reduce function usage)
  • You can listen for dynamic elements
<ul id="test">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
</ul>
Copy the code

We want to add a click event to each of the

  • tags.
    • var parent = document.getElementsByClassName('test') [0];
    parent.addEventListener('click'.function (event) {
        console.log("Elements that trigger events");
        console.log(event.target);// Click a sibling
        console.log("Elements bound to events");
        console.log(event.currentTarget);//parent
    })
Copy the code