JavaScript-javascript DOM Programming Art (2nd edition)

/* Progressive enhancement smooth degraded web page structure layer (structural layer): HTML presentation layer (presentation layer): CSS <link rel= "stylesheet" href= "Style.css" Med    ia= "screen"/> Behavior layer (behavior layer): JavaScript <script src= "Scripts.js" ></script> 1, using meaningful markup to construct the structure of the page; 2, the performance of the information are separated into the CSS style sheet; 3. Use unobtrusive JavaScript responsibly to apply behavior enhancements while ensuring smooth degradation. CSS or JAVASCRIPT1, what is the simplest solution to this problem, 2, which solution will get more browser support, 3, if you want to change the rendering of an element, using CSS, if you want to change the behavior of an element, use the DOM If you want to change its rendering based on the behavior of an element, use your wisdom to have no universal answer to this question; node nodeName, NodeType, NodeValue, ChildNodes, FirstChild,    LastChild, ParentNode, nextSibling, PreviousSibling, GetAttribute (), SetAttribute (), AppendChild (), InsertBefore (), OnClick, onkeypress, onmouseover, Onmouseout,window Open, onload, document DOM getElementById (), getelement Sbytagname (), Getelementsbyclassname (), createelement (), createTextNode (), Html-dom InnerHTML, body, className, form , write (), css-dom style (FontWeight, fontSize, BackgroundColor,), HTML a:href, accesskey, ABBr:title, Blockquote:cite, Dl:dt:dd:sup: Document type HTML5 <! DOCTYPE html> HTML 4.01 Strict type <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "Http://www.w3.org/TR/html4/strict.dtd" >css overflow (visible, Hidde N, scroll, Auto), Ajax (Hijax: Progressive Enhancement (progressive enhancement) using AJAX) XMLHttpRequest readyState (0: uninitialized; 1: loading; 2: Loading Finished; 3: interacting; 4: complete. ), ResponseText, Responsexml, status (0, $, 404, ...), StatusText, open (), send (), onreadystatechange , Math ceil (), floor (), round (), Resource HTML5 specification HTTPS://WWW.W3C.ORG/TR/HTML5MODERNIZR feature detection http://www.modernizr.com< canvas> element Specification Http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html<video> ELEMENT Specification Http://www.whatwg.org/spec/web-apps/current-work/multipage/video.html#videolocalStorage/seseeionStorage Client local storage http://dev.w3.org/html5/webstorage (https://html.spec.whatwg.org/multipage/webstorage.html) WebSocket httP://dev.w3.org/html5/websockets/standardization with server-side bidirectional communicationDrag-and-drop implementation of HTTP://WWW.WHATWG.ORG/SPECS/WEB-APPS/CURRENT-WORK/MULTIPAGE/DND.HTML#DND browser geolocation service http://www.w3.org/TR/ GEOLOCATION-API/W3C HTML5 working Draft Http://www.w3.org/TR/html5WHATWG HTML5 http://www.whatwg.org/spec/web-apps/ CURRENT-WORKHTML5 Interactive demo http://html5demos.com/HTML5 related ppt, code, examples and tutorials http://www.html5rocks.com/*///    The function Addloadevent (func) {var oldonload = window.onload) that the binding needs to perform after the page is loaded;    if (typeof window.onload!== ' function ') {window.onload = func;            } else {window.onload = function () {oldonload ();        Func ();    }}//adds a node function InsertAfter (newelement, targetelement) {var parent = Targetelement.parentnode after the specified node;    if (parent.lastchild = = = targetelement) {parent.appendchild (newelement);    } else {Parent.insertbefore (newelement, targetelement.nextsibling); }}//generates an AJAX Request object function Gethttpobject () {if (typeof XMLHttpRequest = = = ' undefined ') {XMLHttpRequest = function (      ) {try {          return new ActiveXObject ("msxml2.xmlhttp.6.0");            } catch (e) {} try {return new ActiveXObject ("msxml2.xmlhttp.3.0");            } catch (e) {} try {return new ActiveXObject ("Msxml2.xmlhttp");        } catch (e) {} return false; }} return new XMLHttpRequest ();}    General steps for Ajax requests function getnewcontent () {var request = Gethttpobject ();        if (request) {Request.open (' GET ', ' example.txt ', true); Request.onreadystatechange = function () {if (request.readystate = = = 4) {alert (request.response            Text);    }} request.send (null);    } else {alert (' Sorry your browser doesn\ ' t support XMLHttpRequest ');    }}//gets the next element node of the specified node, function getnextelement (node) {if (Node.nodetype = = = 1) {return node;    } if (node.nextsibling) {return getnextelement (node.nextsibling); } RETurn null;}        Adds a class attribute to the specified element, function addclass (element, value) {if (!element.classname) {element.classname = value;    Element.setattribute (' class ', value);        } else {var newclassname = Element.classname;        Newclassname + = "+ value;    Element.classname = Newclassname; }}//add classfunction styleelementsiblings (tag, theclass) {if (!document.getelementsbytagname) to the nextsibling of the specified tag    return false;    var elems = document.getElementsByTagName (tag);    var Elem;        for (var i = 0; i < elems.length; i++) {elem = Getnextelement (elems[i].nextsibling);    AddClass (Elem, Theclass);    }}//the color of the table row is odd-even interleaved function stripetables () {if (!document.getelementsbytagname) return false;    var tables = document.getelementsbytagname (' table ');    var odd;    var rows;        for (var i = 0; i < tables.length; i++) {odd = false;        rows = Tables[i].getelementsbytagname (' tr '); for (var j = 0; J < Rows.length; J + +) {if (odd{//rows[j].style.backgroundcolor = ' #ffc ';                AddClass (Rows[i], ' odd ');            Odd = false;            } else {odd = true;    }}}}//Highlight function Highlightrows () {if (!document.getelementsbytagname) return False when mouse hovers over a row;    var rows = document.getElementsByTagName (' tr '); for (var i = 0; i < rows.length; i++) {rows[i].onmouseover = function () {this.style.fontWeight = ' b        Old ';        } rows[i].onmouseout = function () {this.style.fontWeight = ' normal '; }    }}

JavaScript-javascript DOM Programming Art (2nd edition)