JavaScript DOM, what exactly is it-------Day32

I have a headache this evening, why?

After all, halfway decent, my understanding of JavaScript just stuck in: invoking JavaScript, changing the page style, elements and implementing some of the response of the event, although the need for the time may be used, but the use of the principle is not very clear, as for the DOM, such a professional vocabulary, or save it.

Just a night is not no harvest, first record the provisional own understanding, there may be deviations, with the increase in application after slowly understand it, first branded a printed.

1, Dom what is it?

The most direct answer: "Document Object Model" abbreviation, referred to as the "documents", it is very crazy to hear this answer, but, I have to say it is correct.

The most professional answer: the definition of the DOM is----- It is a platform-neutral interface , where programs and scripts can dynamically access and alter the content, structure, and style of the document.

The most concise answer: An API, application programming interface

There is no doubt that the above answer is correct, and we can also refine a few points: 1, an Application interface, 2, the operation of the document, in my opinion, this is probably the core of it, so we try to explain in a popular way, to see whether it can be more simple, more intuitive understanding of the concept

In the previous article, it was mentioned that JavaScript can be divided into three parts: ECMAscript, DOM, BOM, and then simply describe the next ECMAscript: Define variables to store values of different data types, define operators to manipulate values, The value of the changes and operators of the operation of the process of synthesizing statements, or using a statement to join some of the complete method and so on, but this is placed, the method is there, can not see the instruction manual can operate the machine, we want to truly realize the dynamic and interactive, we must integrate them, and so the HTML (or HTML5) , CSS and JavaScript are the DOM that binds together.

So let's take a look at the three answers above, which is to integrate everything within the document as a large object, and to change the contents of the document, JavaScript is to visit the entrance to the document, and to cite an inappropriate example, a table of hearty dishes, what you need most is a set of tableware , people with tableware to eat, this has become a standard, whether you eat that dish, whether you are eating or he is eating, hand-grilled can be ruled out, and JavaScript is that medium, that channel ....

2. How does the DOM change?

This is always the introduction of the large length of the exposition, see more, understanding is easy, so we first look at this picture of God:

Well, that's it, Dom breaks up the entire document, into a module of a module of parts, inside of a random thing you can take it out alone, this is its strategy, divide and conquer.

So let's see what it divides him into: (Remember what a webpage is, HTML tags + text)

* Document node: This is the entire document, which is a Web page

* element node: HTML tag

* Text node: text

* Attribute nodes: Properties of HTML tags

* Gaze node: Gaze is a class, the points are very fine, do not let a live fish look like

As for the root node, parent node, child node and the difference between the compatriots, it is not known, this society, who can not tell who is who ah.

3. The first impression of Dom

Your first impression of the DOM is what, I do not know, my first impression is the response to the event, since it is to achieve dynamic, can interact, it is necessary to listen to events, or the mouse, or keyboard, this is my original concept, of course, this is very one-sided, but this will you always forget, Just think about the events that need to be monitored:

* onclick/onmouseover/onblur/Even click, double click, right button, long click Mouse action, enough to organize a separate article

* Listen to the keyboard (different keys corresponding coding, really want to back it?) ）

* actually another is the monitoring of page changes, window.onload/onchange/, etc.

4, Dom additions and deletions to search

Encounter data processing, inertia is to consider additions and deletions to investigate, have to say, this should be counted as a good habit. Our most common, most frequently used should be to check and change.

There are usually three ways to check: getElementById, Getelementbytagname, Getelementbynames, because the uniqueness of the ID, the ID to locate the query is the fastest and most often used, and the latter two is to get the collection type, A good method of bulk acquisition, TagName used to obtain similar elements of the same label, while ClassName can be freely defined, more convenient for the selected parts, but not all, of course classname still exist its biggest problem is compatibility, the evil of IE.

And the change is more simple, before the previous changes in the page background color, and even change the introduction of the style, change the contents of the label, etc., are the DOM changes, it mainly includes such as the following aspects: 1, change the HTML content, 2, change the CSS style, 3, change the HTML properties, 4, change the event (handler)

And the increase and delete is only recently mastered learning, createelement ("div") is not very familiar with, yes, we have used very many times, of course, the node is not only this one, we can also adapt, just do not forget the last AppendChild (), And the deletion is more easy to understand, where to remove from, removechild (), "Magistrate than the current tube" in the embodiment of the incisively and vividly, of course, the front of the change can also be through the replacechild to the overall change, will not say more.

Here in fact there is one of the most obvious, most often used, and we are very little to think about a most vivid example, we analyze, deepen the impression:

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

is not very familiar, no way, life is like this, always inadvertently let you feel the endless wisdom. Let's write down its DOM code.

var script = document.createelement ("script"), Script.type = "Text/javascript"; script.text = "function Show () {alert (' Haha ');} "; Document.body.appendChild (script);

such words <script type= "text/javascript" src= "" ></script> do you know how to write it?

5. How to speed up DOM execution

In fact, I now write this is a bit far-fetched, because I have no practical application test, but the feeling is reasonable, here is a piece of said:

First, why is there a problem with Dom execution speed?

Dom changes will seriously affect the user interface of the Web page, you need to draw the page again, it is necessary for the browser to parse again, and in order to ensure the accuracy of the operation, all the changes are in sequence synchronous operation, that is, "reflux", because the need to run again from the beginning, so the performance must be affected. We can not change this situation, only deliberately and effectively to reduce its burden, to avoid more influential factors.

Then, let's take a look at what those operations can do?

1. Change the DOM by changing the class name

document.getElementById (""). Style.color=cyan;

document.getElementById (""). style.width=100px; Every change needs to be repeated, twice

We are fully able to write. cc{style:cyan;width:100px;}

document.getElementById (""). classname=cc; it just needs to be done once.

2, one-time DOM element generation

var e=document.createelement ("");

Body.appendchild (e);

e.innerhtml= "haha";---two-time re-analysis

And the only thing we can do is to turn two or three sentences upside down.

var e=document.createelement ("");

e.innerhtml= "haha";

Body.appendchild (e);--Once you can

3, there is a document fragment record

function Show (Element) {

var A;

for (Var i=0;i<10;i++) {

var e=document.createelement ("");

e.innerhtml= "haha";

Body.appendchild (e)

}

};----this but a huge project, need 10 times to re-analyze

And we record it through a document fragment, effectively reducing 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);

}

I understand the DOM, temporary is such a framework, the next need to look at the BOM, after all, the three parts is a general, integrated look at the words there will be no small surprise, today first here, Ah, late, sleep

JavaScript DOM, what exactly is it-------Day32