The following are only personal reading notes, limited to my knowledge limitations, may be biased. Please forgive me for pointing out the problem.
1. The name of this book is "JavaScript DOM programming Art", so what is DOM first?
The Dom-document object model, translated literally, is the text object. The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. ”
It abstracts the Web page into a tree of nodes:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <title>Document title</title></Head><Body> <ahref="">My Links</a> <H1>My title</H1></Body></HTML>
The above code can be represented by the following tree
You can see that the tree is made up of nodes and lines. The nodes are divided into three categories, namely element node, text node and attribute node (attribute node) (* not only 3 classes). The line expresses the parent-child relationship between the nodes, and the node at the beginning of the line is the end node.
2. What is smooth degradation?
The smooth degradation is when the JS, CSS and other files fail when the Web page can also express the most basic meaning. Although we have made a lot of efforts to make a beautiful web page, but we can not ensure that the user's network environment is good. If the content of the Web page and JS strong coupling, then when the JS transmission is too slow or blocked then the page will collapse. To achieve smooth degradation, we need to follow the progressive enhancement and separation of JS.
3. Some pits in the text
P129
<title= "Document Object Model"><em>DOM </ em ></ abbr >
var key = current_abbr.lastChild.nodeValue; console.log (key); // NULL
You can find that the key cannot get to the value because the NodeValue property sets or returns the node value of the specified node. And Current_abbr.lastchild gets the <em> element node.
if (! current_abbr.lastChild.hasChildNodes ()) { var key = current_abbr.lastChild.nodeValue; } Else { var key = current_abbr.lastChild.lastChild.nodeValue; };
You can first determine if there are no sub-elements to take the value, temporarily did not think of other methods ....
And in the last composite case, the last Ajax case. With Firefox no problem, ie words will always stop in the loading animation, is using Chrome will prompt error, my chrome version number is 42.0.2311.90 m
Chrome error messages are as follows
XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/chapter12/domsters/submit.html. Cross origin requests is only supported for protocol schemes:http, data, Chrome, chrome-extension, HTTPS, Chrome-extensi On-resource.
Uncaught Typeerror:cannot Read Property ' length ' of NULL
Uncaught networkerror:failed to execute ' send ' in ' XMLHttpRequest ': Failed to load ' File:///C:/Users/Administrator/Deskt Op/chapter12/domsters/submit.html '. Submitformwithajax @ global.js:438thisform.onsubmit @ global.js:367
navigated to File:///C:/Users/Administrator/Desktop/chapter12/domsters/submit.html
The art of JavaScript DOM programming--Notes