What is javascript DOM? ------- Day32

I have a headache this evening. Why?

After all, it's just half the way out. My Understanding of javascript only stays at: calling javascript, changing page styles, elements, and implementing responses to some events. Although it may be used when necessary, but the principle of use is not very clear, as for DOM, such a professional word, it is easy to save.

However, one night is not without any gains. First, record your understanding for the moment, and there may be deviations. As the number of applications increases, let's take a look at it. Then, let's take a look at it.

1. What is DOM?

The most direct answer is the abbreviation of "Document Object Model", referred to as "Document Object Model". It is really crazy to hear such an answer, but I have to say it is correct.

The most professional answer: W3C defines DOM as an interface neutral to platform and language, programs and scripts can dynamically access and modify the content, structure, and style of a document through this interface.

The most concise answer: an API, an Application Programming Interface

Without a doubt, the above answers are correct, and we can also extract several key points: 1. An application interface; 2. operations on the document, in my opinion, this is almost the core of it, so let's try to explain it in a simple and intuitive way to see if this concept can be understood.

In the previous article, we mentioned that javascript can be divided into three parts: ECMAscript, DOM, and BOM. Then we briefly described ECMAscript: defines variables to store values of different data types, the operator is defined to operate on the value, and the change of the value and the operation process of the operator are combined into statements, or some complete methods are concatenated with statements. However, the method is available, but we have never seen the manual to operate the machine on our own. To realize dynamic and interactive, we must integrate them, and html (or html5) css and javascript together are DOM.

In this way, we can review the above three answers, which integrate all the things in the document as a large object for Operations. As for changing the content in the document, javascript is the entry to access this document. For an inappropriate example, what do you need most when there is a rich table of dishes on the table? It's a set of tableware that people eat with tableware, this has become a standard. No matter which dish you eat, whether you eat it or what he is eating it, You can exclude it, while javascript is the medium, that channel ....

2. How does DOM change?

This topic is always described in various sections. It is easier to understand and read more. Let's take a look at this figure:

Well, in this way, DOM splits the entire document into fragments of a module and a module. You can extract any part of the document separately. This is its policy, divide and conquer.

Let's take a look at what it divides into: (remember what is a webpage, html Tag + text)

* Document node: This is the entire document and a webpage.

* Element node: html Tag

* Text node: Text

* Attribute node: Attributes of html tags

* Annotation nodes: Annotations are a type of annotation, which is very detailed and never let a live fish look.

As for the differences between the root node, parent node, and child node and the compatriot, we will not go into detail. In this society, no one can tell who is or who is.

3. DOM's initial impression

What is your initial impression of DOM? I don't know. my initial impression is the response to events. Since it is dynamic and interactive, you must be able to listen to events, this is my initial concept, either the mouse or the keyboard. Of course, this is one-sided, but you will never forget it. Simply think about what events need to be listened:

* Onclick/onmouseover/onblur/even click, double-click, right-click, and long-pressed mouse operations.

* Listen to the keyboard (encoding corresponding to different buttons, do you really need to back it ..)

* In fact, there is also a listener for page changes, such as window. onload/onchange /.

4. add, delete, modify, and query DOM

When dealing with data processing, the inertia is to consider adding, deleting, modifying, and querying. I have to say that this should be a good habit. We should query and modify the most common and frequently used data.

There are usually three query methods: getElementById, getElementByTagName, and getElementByNames. Because of the uniqueness of the id, it is the fastest and most commonly used to locate the query through the id, and the other two are the Collection types, A good method for batch acquisition. tagname is used to obtain similar elements of the same tag, while classname can be defined freely, which makes it easier to select parts, not all, of course, the biggest problem with classname is its compatibility.

The modification is simpler. The changes made to the page background color, the style, and the label content are all modified by DOM. It mainly includes the following aspects: 1. Change html content; 2. Change CSS styles; 3. Change html attributes; 4. Change Events (handler)

Addition and deletion are just recently learned. Are createElement ("div") very familiar? Yes, we have used it many times. Of course, there are more than one node, we can also make changes, as long as we don't forget the last appendChild (), and delete it makes it easier to understand, where to remove it, removeChild (), "county officials are not as competent as they are now". Of course, the previous changes can also be modified as a whole through replaceChild.

There is actually one of the most obvious and commonly used examples, but we seldom think about it. Let's analyze it and make a deeper impression:

<script type="text/javascript">function show(){alert("haha");}</script>

Isn't it very familiar? There's no way. Life is like this, and it will make you feel endless wisdom inadvertently. Let's write its DOM code.

var script = document.createElement("script");script.type = "text/javascript";script.text = "function show(){alert('haha');}";document.body.appendChild(script);

In this case, do you know how to write <script type = "text/javascript" src = ""> </script>?

5. How to speed up DOM operation

In fact, it is a little far-fetched because I have not tested it in practical applications, but it makes sense. Let's talk about it here:

First, why is there a DOM running speed problem?

DOM modification will seriously affect the user interface of the webpage. You need to re-draw the page, that is, you need the browser to re-parse the page, and in order to ensure the accuracy of the execution effect, all modification operations are executed in sequence, that is, "reflux". Because the operation needs to be re-executed from the beginning, the performance must be affected. We cannot change this situation. We can only intentionally and effectively reduce its burden and avoid more influencing factors.

Then, let's take a look. What operations can we do?

1. Modify the DOM by switching the class name

Document. getElementById (""). style. color = cyan;

Document. getElementById (""). style. width = 100px; perform re-analysis for every change and run it twice.

We can write it as. cc {style: cyan; width: 100px ;}

Document. getElementById (""). classname = cc; you only need to run it once.

2. One-time DOM Element Generation

Var e = document. createElement ("");

Body. appendChild (e );

E. innerHTML = "haha"; --- two reanalyses

What we can do is to reverse two or three sentences.

Var e = document. createElement ("");

E. innerHTML = "haha ";

Body. appendChild (e); -- once

3. There is also a document segment record.

Function show (element ){

Var;

For (var I = 0; I <10; I ++ ){

Var e = document. createElement ("");

E. innerHTML = "haha ";

Body. appendChild (e)

}

}; ---- This is a huge project and requires 10 reanalyses.

However, we use the document segment record to effectively reduce the time

Function show (element ){

Var a, f = document. createDocumentFragment ();

For (var I = 0; I <10; I ++ ){

Var e = document. createElement ("");

E. innerHTML = "haha ";

F. appendChild (e );

}

Body. appendChild (f );

}

The DOM that I understand is such a framework for the time being. We need to look at BOM next. After all, these three parts are a whole. If we look at the integration, we will be surprised. We will come here today, ah, it's late again. Go to bed.