Dom and DHTML, etc., review summary

DOM(Document Object Model).
HTML(Hypertext Markup Language), hyper-text markup language.
Super class for HTML: Node->document;node->element->htmlelement.
Elements of HTML: htmldocument/htmlbodyelement/htmldivelement/htmlformelement/htmlselectelement/htmloptionelement
/htmltableelement/htmltablecaptionelement/htmltablerowelement/htmltablecolelement/htmltablecellelement
/htmlolelement/htmlulelement/htmllielement/htmltextareaelement/htmlinputelement/htmliframe and so on.
There are two ways to access an HTML element: Based on the ID, based on the node relationship.
Access HTML elements by ID: document.getElementById ("a"). InnerHTML.
Access according to the node relationship: parentnode/firstchild/lastchild/previoussibling/nextsibling.
Access form controls: form.elements[0]/form.elements[' Ctl_name ']/form.ctl_name.
Access the Table control: Table.caption/table.rows[i].cells[j]/table.rows.length.
Access List control: Select.options[]/select.selectedindex.
Modify HTML elements: Most controls, just innerhtml assignment; input controls, modify value values.
Node operation: createelement (TAG)/clonenode (Bdeep)/appendchild (new)/insertbefore (new,ref)/replacechild (new,old)/ RemoveChild (node).
Table: Table.insertrow (Index)/deleterow (index)/createcaption/createtfoot/createthead/row.insertcell (index)/ Deletecell (Index).
List box: Select.add (option,before)/new option (text,value,defaultselected,selected)/remove (index).

DHTML(Dynamic html), the development of traditional static HTML, has now been superseded by the DOM, but can still be used.
The DOM has a tree structure, while DHTML does not; the object in DHTML has a containing relationship; The contained person is the attribute of the containing person, in the form of an associative array.
The inclusion relationship of DHTML:window(location,history,screen,navigator,frames,document (All,body,anchors,links,images, Froms (elements)).
The global variable is the window's property, the function is the window's method, and Window provides many methods and properties that can be used directly.
Method: alert/confirm/prompt/open/close/focus/blur/moveby/moveto/resizeby/resizeto/scrollby/scrollto/setinterval/ Clearinterval and so on.
Properties: closed/status/defaultstatus/name/self/top/parent/history/location/navigator/screen/document/frames[] and so on.
Access History Method: back/foward/go (int) and so on; Screen information properties: width/height/colordepth, etc.
Properties of the Accesspage URL (location): Hostname/href/host/port/pathname/protocol, etc.
Properties of the Navigation (Navigator): Appname/appversion/platform and so on.

Binding methods for event handlers : You can bind to attributes on HTML elements or on properties of Dom objects.
This pointer to the event handler: can refer to window (onclick= "FN ();" ), HTML elements (onclick= "this.*"), Dom objects (DOM.ONCLICK=FN;).
The return value (true/false) of the event handler can change the default behavior of the event.
Trigger event in code: Click/blur/focus/select/submit/reset, etc.
The above is a common method, there are IE special methods (fact specification, IE browser share large) and Dom method (industry specification, Chrome/firefox/opera, etc.).
IE Binding method: <script for= "bn" event= "onclick" type= "text/javascript>/dom.attachevent (" onclick ", fn).
Dom Binding method: Dom.addeventlistener ("EventType", Handler,captureflag capture/bubbling). IE also seems to support the.
Events object: Event (Load/focus/blur/select/submit)/uievent (domactivate)/mouseevnet (click/mousedown/up), etc.
Event Properties: Type/target/currenttarget/eventphase/timestamp/bubbles/cancelable, View/detail, Button/key/xy.
Event propagation: The propagation (capture) phase from the parent control to the child control, and the opposite (bubbling) stage; Event.stoppropagation () stops propagating.
Event forwarding: document.createevent ("events");/e.initevent ("Click", True, False)/dom.dispatchevent (e).
Default behavior for canceling an event: Event.preventdefault ().

Traditional HTML is only responsible for the presentation of HTML pages, a small amount of data available cookies, but it has a size limit (4KB), unencrypted unsecured, but also repeated the sending.
HMTL5 enhances the ability to store locally : The webstorage is used to cache the client's data and is submitted to the server when it is online; it is divided into session and local two kinds.
Window provides two properties:sessionstorage and localstorage, which are only valid for the duration of the session, which is valid until explicitly cleared.
Storage is actually a key-value pair, with the following properties and methods: Length/key (Index)/getitem (key)/set (Key,value)/remove (key)/clear ().
Offline application, need to add in Offline event monitoring, Window.addeventlistener ("Online/offline", listener,usecapture), browser online status judgment: Navigator.online.
Applicationcache.update ()/swapcache ()/onerror/onchecking/onnoupdate/ondownloading/onprogress/onupdateready/ Oncached and so on.

Use worker to create multithreading : Worker=new Worker (' *.js '), with PostMessage (data) and Worker.onmessage (event) {Event.data Send and receive data.
The data passed between threads can also be JSON objects, packaged and unpacked with Json.stringify (jsonobj) and Jsonobj=json.parse (Event.data).
Threads available: importscripts (URLs)/sessionstorage/localstorage/xmlhttprequest/navigator/location/setinteval ()/praseInt ( such as

cross-Document messaging , you can use Targetwin.postmessage (data,origin) and OnMessage (Messageevent e) to send and receive messages.
Messageevent has the following properties: Information data data/source domain name origin/source window source/target window targets and so on. JSON objects can be passed directly.

The WebSocket can communicate directly with the server (serversocket/socket) in real time , eliminating the need for frequent requests or long connections using the HTTP protocol.
WebSocket method: Send/close; state: conecting/open/closing/closed; event: Onopen/onclose/onmessage/onerror.