HTML Base DOM Overview (first day)

The previous sentence: Dom content too much, can only be concise, deep into the TCP protocol, browser kernel, computer graphics and other knowledge, slowly, let us spiral way to improve their own bar

Appetizer:
Do you know what contenteditable is for? A bit of thinking: some cattle in a specific time point of study Dom and features, a few years later, compatible with ie6,7,8 become ancient prose, some special usage gradually standardized, XXXX research a lot of days of the problem, for H5 is a piece of cake, not we can not, is the limitations of the DOM decision, focusing on the future.

Look up to the world, H5.

Semantic tags

Drawing: canvas/svg/

http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/, I was out of my bladder after reading.

Audio and Video: Audio/video

Geographic information: geolocation API

Cross-document communication: PostMessage API, XMLHttpRequest2

Set of bytes: WebSocket API

Optimized forms: The Forms API

Workflow: The Web Workers API supports multi-threading, enabling Web applications to have background processing capability without blocking DOM rendering

http://www.w3ctech.com/topic/866 I most admire the shadow of the Elder translated

Offline storage: Web Storage API

3d:webgl

http://www.pper.com.cn/, I've been incontinence again.

http://threejs.org/the incontinence that can't stop

Some properties and variables

Contenteditable? Text Editor

ContextMenu? Add Right-click menu

Draggable dropzone? Natural support for drag and drop

Prefetch? Preloaded <link rel= "prefetch" href= "http://www.example.com" >

Body

BOM Browser Object Model

DOM Document Object Model

Browser Listener Object

XMLHttpRequest Object

Question: What exactly is the BOM and Dom?

API interface for DOM

Question: What kinds of DOM node types are there? is a label a node?
Question: If you are a DOM designer, how would you design the DOM API???

Properties The following example opens the current page console console run, Dom references the current page

Dom.childnodes;  Returns a pseudo-array of all the child nodes of the node (NodeList), note that the various types of node dom.childNodes.length are returned; DOM.CHILDNODES[1];

Dom.firstchild; Returns the first child node = = = Dom.childnodes[0],//document.childnodes[1].childnodes[2].childnodes[20].childnodes[0] = = = Document.childnodes[1].childnodes[2].childnodes[20].firstchild//true

Dom.lastchild; Returns the last child node = = = Dom.childnodes[Dom.childnodes.length-1];

dom.nextsibling; Return to the next sibling node, dom.nextSibling.nextSibling can also play

dom.previoussibling; Returns to the previous sibling node,

Dom.attributes; Returns an array of properties for this node

Dom.nodename; Returns the node name of the node string

Dom.nodevalue; Returns the node value of the node string

Dom.textcontent; Return the text content of this node, note: IE does not support can be used Dom.innertext

dom.innerhtml; Returns all the HTML code for the node

Dom.id; The ID of the node returned (string) did not return ""

Dom.classname; Returns all the class strings of the node; Example: Document.childnodes[1].childnodes[2].classname//"Theme-default aui-layout aui-theme-default contenteditor Edit No-tools-pin-toolbar "

Dom.style; Returns the style of the node, printing document.getElementById (' Editor-preload-container '). style;

Dom.value; Returns the value of the node (form element), for example: document.getElementById (' Editor-preload-container '). Value//undefined

Method

Dom.haschildnodes (); Whether the node has child nodes.

Dom.hasattributes (); Whether the node has a property

Dom.appendchild (DOM); Add a child node at the end of the child node.

Dom.clonenode (false/true); Clone node, false do not copy child nodes, true copy child nodes

Dom.insertbefore (new child node, queue-cut node); Insert child nodes, you can control the position

Dom.removechild (truncated point); Delete child nodes, return deleted nodes

Dom.replacechild (truncated point, replacement node); Replace the child node and return to the truncated point

Shortcuts and optimizations

DOCUMENT.CHILDNODES[1].CHILDNODES[2].CHILDNODES[20]; <div id= "Editor-preload-container" style></div>

DOCUMENT.CHILDNODES[1].CHILDNODES[2].CHILDNODES[20] instanceof Element; True

document.getElementById (' Editor-preload-container ') instanceof Element//true

document.getElementsByTagName (' div ') instanceof htmlcollection//True

Document.createelement ();

document.createTextNode ();

document.getElementById ();

document.getElementsByTagName ();

Document.getelementsbyclassname ();

Document.images//Run a Run

Document.links

Document.forms

document.write (' HTML ');

Document.cookie

Document.title

Document.referrer

Document.domain

Event monitoring, run up and see everything clearly

<!doctype html>
<meta charset= "Utf-8" >
<body id= "Body" >
<div style= "Height:400px;width:400px;background:blue;" ></div>
<script type= "Text/javascript" >
var BODY = document.getElementById (' body ');
Body.addeventlistener (' click ', Function (e) {
Console.log (e instanceof window. MouseEvent);
},false);
</script>
</body>

Addeventlistenter (event type, processing function, whether capture); ---> attachevent

RemoveEventListener (event type, processing function); ---> DetachEvent

Event bubbling

Bubbling from bottom to top, triggering listening in turn.

E.stoppropagation (); Block bubbling---> cancelbubble = true;

E.preventdefault (); Block default behavior--returnvalue = false;

Event Type:

Document. Run for a minute

XMLHttpRequest Object

var xhr = new XMLHttpRequest ();

Xhr.open (Request type is case sensitive, request address, asynchronous, false=== synchronous);

Xhr.onreadystatechange = function (no parameter) {

if (xhr.readstate = = = 4) {Request status, 0 not initial/1 load request/2 load complete/3 request interaction/4 Request complete

if (xhr.status = = =) {HTTP request status code

Xhr.responsetext return content

}

}

}

Xhr.senrequestheader (Key:value); Set the request header information, you can set multiple//setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Xhr.send (data sent);

XMLHttpRequest2

* Upload and download 2 binary data, examples

* Auto decode data type: Arraybuffer/blob/document/json/text

* Monitor upload, download progress

JavaScript performance optimizations-repaint and Reflow

Original address: http://www.cnblogs.com/jiajiaobj/archive/2012/06/11/2545291.html

Repaint (redraw), when repaint changes, the appearance of the element is changed and occurs without changing the layout, such as changing the outline,visibility,background color without affecting the DOM structure rendering.

Reflow (rendering), unlike repaint, is that he will affect the structure of the DOM rendering, and he will trigger repaint, he will change himself and all of the parent elements (ancestors), this overhead is very expensive, resulting in performance degradation is inevitable, the more page elements more obvious effect.

When to occur:

1. addition, modification (content), deletion of DOM elements (Reflow + Repaint)
2. Modify only the font color of DOM elements (only repaint, because you do not need to adjust the layout)
3. Apply a new style or modify any attributes that affect the appearance of an element
4. Resize browser window, scrolling page
5. Read some attributes of an element (Offsetleft, OffsetTop, offsetheight, offsetwidth, Scrolltop/left/width/height, clienttop/left/width/ Height, getComputedStyle (), Currentstyle (in IE))

var fragment = Document.createdocumentfragment ();
Fragment.appendchild (document.createTextNode (' Keenboy Test 111 '));
Fragment.appendchild (document.createelement (' BR '));
Fragment.appendchild (document.createTextNode (' Keenboy Test 222 '));
Document.body.appendChild (fragment);

4. Centrally modifying styles
4.1 Modify the attributes on the element style as little as possible
4.2 Modify the style as much as possible by modifying the ClassName
4.3 Setting style values with the Csstext property
Element.style.width= "80px"; Reflow
Element.style.height= "90px"; Reflow
element.style.border= "Solid 1px red"; Reflow
The above results in multiple reflow, the more calls produced more
element.style.csstext= "Width:80px;height:80px;border:solid 1px red;"; Reflow
4.4 Cache Layout Property values
var left=elem.offsetleft; Use left multiple times to create a reflow
4.5 Set the position of the element to absolute or fixed
Elements are separated from the standard stream and are also detached from the DOM tree structure, requiring only reflow themselves and subordinate elements when reflow is required
4.6 Try not to use table layout
Once the table element is triggered, reflow causes all other elements in the table to be reflow. In the case where table is appropriate, you can set Table-layout to auto or fixed so that the table can be rendered on a line, which is also to limit the scope of reflow
4.7 Avoid using expression, he will recalculate each call (including loading the page)

the last sentence: a lot of content is not three words can explain the white, canvas on this one label, I studied for one months, open the field of vision more important, where the ceiling, where to find information, technical analysis has a general reference, let us spiral growth bar.

HTML Base DOM Overview (first day)