preface

This basic series of articles, the author sort out his front knowledge points, sort out the basis of personal learning, the original intention is to improve themselves, at the same time to share, I hope to help you.

This article is suitable for students with 0~3 working experience to summarize knowledge points

Include personal description, if there are mistakes in understanding, or missing important knowledge points, hope to point out.

This series, the intention is to improve themselves, at the same time to share out, hope to help you also.

At one point in the history of the front-end, our logical language was called “JS” (Javascript). Later, as the front end evolved and the single-page architecture arrived, the logic of the front end came to be called “ES” (ECMAScript).

So, what is the relationship between JS and ES (or ES6)? Js = ES + BOM + dom.

Our text nodes, such as nodeType, nodeList, and childNodes, all fall into the DOM category. You might think that nodeType, nodeList, childNodes, etc., is not that important. I hardly ever use it in my daily work. The author encountered some problems when learning vUE source code and converting virtual DOM into HTML, which were all solved through the main points of this article, or needed to be able to deeply analyze.

This article has a detailed summary of THE PART of JS, BOM and DOM.

concept

Let’s take a look at their concept:

DOM: Document Object Model (DOM), describes the methods and interfaces for processing web content. The basic object is document (window.document).

BOM: Browser Object Model, which describes the methods and interfaces for interacting with the Browser. It consists of five objects: Navigator, History, Screen, Location, and Window. The most fundamental object is window.

The literal meaning is relatively easy to understand. If you are still ambiguous about the concept, well, that’s the point of writing a summary, to put it in a language that you can easily understand, and maybe my understanding will help you to deepen the knowledge.

DOM is our daily Html all text nodes, elements, attributes and other operations, access, modification, etc. are in the DOM category. Among them, our daily use of HTML DOM, he includes the HTML standard object model, W3C standards and other specifications.

On the other hand, BOM refers to the properties related to the browser, such as the browser window, the browser page jump, etc.

See here, not deep into the line of friends, may be very simple. Actually not, very learned. Let’s move on.

knowledge

node

First let’s talk about nodes.

Everything in an HTML document is a node, such as a node between the body, a node between div and /div, and even a comment. It’s usually in the outermost layer, so HTML is also called the root node.

There are a lot of nodes that can be seen in a regular page, and they have their own interaction, such as child, parent and brother nodes, so WC3 defines how to access and modify them. The common methods are listed below:

  • GetElementById () returns the element with the specified ID.

  • GetElementsByTagName () returns a nodal list (collection/node array) containing all elements with the specified tag name.

  • GetElementsByClassName () returns a nodal list containing all elements with the specified class name.

  • AppendChild () adds the new child node to the specified node.

  • RemoveChild () deletes the child node.

  • ReplaceChild () replaces the child node.

  • InsertBefore () inserts a new child node in front of the specified child node.

  • CreateAttribute () Creates the attribute node.

  • CreateElement () creates the element node.

  • CreateTextNode () creates a text node.

  • GetAttribute () returns the value of the specified attribute.

  • SetAttribute () sets or modifies the specified attribute to the specified value.

  • InnerHTML – the text value of the node (element)

  • ParentNode – the parentNode of a node (element)

  • ChildNodes – childNodes of a node (element)

  • Attributes-node (element) attributes node

This is about the easiest way to access or modify.

So what does the node itself contain

There are three things here. NodeType, nodeName, and nodeValue

First,nodeType, is the type of node returned by the property. NodeType is read-only. Let’s list the types of text.

The element type NodeType
The element 1
attribute 2
The text 3
annotation 8
The document 9

As a general rule, each node has a childNodes attribute, which is a NodeList object (an array of nodelists) that is the result of dynamically executing queries based on the DOM structure, so changes to the DOM structure are automatically reflected in the NodeList object.

Each node also has a children attribute. The difference between childNodes and childNodes is that childNodes stores NodeList objects, while children returns HTMLCollection objects. NodeList stores not only element nodes, but also text nodes, comment nodes, and so on, while HTMLCollection stores only element nodes.

We analyze the case:

<div id="test">
    hello <span>word</span>
</div>

<script>
    let btn = document.getElementById("test");
    console.log(btn.childNodes, btn.children)
    //NodeList(3) [text, span, text]
    //HTMLCollection(1) [span]
</script>
Copy the code

It is also important to popularize that neither children nor childNodes is a real array (about arrays, the author has been detailed in the summary array of ES6, this article will not be detailed), it is a class array.

If we need to convert to an array, we can only manually convert the obtained NodeList or HTMLCollection into an array.

Neither NodeList nor HTMLCollection is an array. If we need to convert it to an array, we can use the extension operator to do so:

const array = [...NodeList]
const array2 = [...HTMLCollection]
Copy the code

At this point, can you imagine how vue’s virtual DOM operates? In simple terms, it is using object to simulate NodeList.

attribute

The property name nodeName

Property names do not only exist with property nodes, any node has property names. The nodeName attribute specifies the name of the node. Their attribute names are as follows:

  • The nodeName of the element node is the same as the label name
  • The nodeName of the property node is the same as the property name
  • The nodeName of a text node is always #text
  • The nodeName of the document node is always #document

The attribute value nodeValue

The nodeValue attribute specifies the value of the node, that is, each attribute name has its corresponding attribute value.

  • The nodeValue of the element node is undefined or null
  • The nodeValue of a text node is the text itself
  • The nodeValue of the property node is the property value

An attribute node

Let’s look at the property node again. What is a property? The built-in objects in our element are called attribute nodes. For example, style, class, and ID are called element attribute nodes.

  • Element.getAttributeNames(); // Get the attribute name
  • Element.getAttribute(“class”); // Get the value of the class attribute
  • Element.attributes.item(0); // Get the element’s first attribute key-value pair
  • Element.hasAttribute(“class”); // Check whether there is a class attribute
  • Element.setAttribute(“class”, “active”); // Set the class attribute

For example, if we need to reset the value of the element class, we can use setAttribute to reassign the class. There is, of course, a built-in class object to work with: Element.classList.add(“active”, “show”)

At this point, can you imagine how vue’s V-if or V-ON is implemented? Simply put, it is treated as an element attribute, the corresponding identifier is obtained, and then parsed.

The event

Again popularizing the DOM event, our daily use of click, mouse and other events, is the DOM event. Onclick, onchange, onMouseDown, onMouseup, onFocus, etc., it’s all a DOM event.

Here are some cool facts or details about DOM events:

  1. If you customize the onclick event, it will directly override the original tag onclick event. For chestnuts below, test is invalid.

    <div id=" BTN "onclick="test(this)"> let BTN = document.getelementByid (" BTN "); btn.onclick = function (e) { alert("2"); } function test(){ alert("1"); }Copy the code

2. The trigger for onclick comes from the listener itself, and the listener event addEventListener also needs to detect the backflow of events, so the priority is always: onclick>addEventListener, as follows:

<div id=" BTN "onclick="test(this)"> <div > <script> let BTN = document.getelementByid (" BTN "); btn.onclick = function (e) { alert("1"); } btn.addEventListener("click", function (e) { alert("2"); }) </script>Copy the code

Go to 1 and then 2.

3. In the obtained object, currentTarget represents the current object and target represents the object of the event. Chestnuts with the following edges:

Button 0
Button 1 

let btn_box = document.getElementById("btn_box");

btn_box.addEventListener("click", function (e) {
	consloe.log( e.currentTarget);
	consloe.log( e.target);
})
Copy the code

Click button 0, the currentTarget object refers to bTN_click_0, and the target object is bTN_box

Custom event

In addition to the official click, focus and other events can be listened to, we can also customize events for listening. Here’s an example:

Let myEvent = document.createEvent('Event'); // Define the event name 'build'.myevent.initEvent ('', true, true); //eventType: event name //canBubble: whether bubbles are supported //cancelable: whether preventDefault() can be used to cancel. New3Event. Name = "document. The createEvent create custom events" / / document. If you need to monitor events addEventListener (' myEventName ', function (e) { // e.target matches elem alert(e.name) }, false); // The triggering object can be any element or other event target document.dispatchEvent(myEvent);Copy the code

This is the easiest way to create a “custom event”, document.createEvent.

You can use CustomEvent or Event if you need to customize the passing parameters. I won’t go into details here.

After watching the above demo, we seem to know the general usage. But what are the benefits?

Pros and cons of custom events

The pros and cons are somewhat similar to traditional listening events. Its advantage is that the modules are low coupled and do not affect each other.

Shortcomings, not good positioning problems, easy to lead to subtle mistakes. When a big project goes wrong, even the entrance can be hard to locate.

BOM

Now let’s talk about bom.

The bom point of knowledge, relative words is only the understanding of the knowledge. Because it belongs to the application development category (browser development), we only need to have some understanding of his knowledge, it is not recommended to in-depth.

This part, if there is an interview or daily will not dig deep, only consider whether the knowledge point

It can be composed of the following six parts:

Location

Below is the property of Location

attribute describe chestnuts
hash Get the anchor point, which is simply after the # in the URL #detail? a=1
host Port + port of url www.baidu.com:8080
hostname The host path www.baidu.com
href Full url www.baidu.com?a=1
pathname Returns the path portion of the current URL /index.html
port port 8080
protocol agreement HTTP or HTTTPS
search agreement Get the parameter, which is basically the URL, right? behind

Here is the method for Location

methods describe
assign Loading a new document
reload Refresh the page
replace Replace the current document with a new one

Navigator

attribute instructions
appCodeName Returns the code name of the browser
appName Returns the name of the browser
appVersion Returns the platform and version information for the browser
cookieEnabled Returns a Boolean value indicating whether cookies are enabled in the browser
platform Return to the operating system platform on which the browser is running
userAgent Returns the value of the user-agent header from the client sending server

Screen

attribute instructions
availHeight Return the height of the screen (excluding the Windows taskbar)
availWidth Returns the width of the screen (excluding the Windows taskbar)
colorDepth Returns the bit depth of the palette on the target device or buffer
height Returns the total height of the screen
pixelDepth Returns the color resolution of the screen (bits per pixel)
width Returns the total width of the screen

History

attribute instructions
back Return to previous page
forward Return to next page
go Loads a specific page in the History list

conclusion

This article is original except for the API documentation referred to by a third party. If there is a misunderstanding, or missing important knowledge points, hope to point out. If it helps you a little, please like and follow, the following will continue to update the article. ,