The art of JavaScript DOM programming--Notes

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.