JavaScript DOM Programming Art Second Edition learning (1/4)

---restore content starts---

The next project requires web-related knowledge, so under the guidance of Daniel to come to read this book.

Current level: Html&css&js basic master, can read the document and Google find the case to complete the front-end code writing, but not deep learning, HTML5&CSS3 new features, JS Basic & Framework are unfamiliar

Purpose of reading: Understanding the DOM concept and learning about the JS features through training and familiarity

Blog Purpose: Urge yourself to learn and record the process

Blog writing when reading progress: The end of the 6th chapter

Read the plan:

After browsing the catalogue, summarize the book Learning ideas are as follows (in fact, the dormitory directory):

Brief History-"The most basic grammar-" dom-"Dynamic Tag Creation-" Enrich the contents of the document (not copy)-"CSS dom-" JS Animation-"HTML5 features

456 This three chapter takes the picture library as the practice project to explain the program optimization, the separation, the compatibility and so on the question, the procedure is relatively simple, understands the result to be able to write oneself after the comparison with the book

Chapter 12 is a comprehensive example, not yet known

Start reading:

First, a Brief history:

Guidance: Basic Concepts

Content:

Dom Concept: A set of methods for Abstracting & conceptualizing The contents of a document, as well as a basic agreement for mutual recognition.

Dom Normalization: Allows any kind of programming Language to manipulate documents written in any one of the markup languages ! (Json&xml&xaml and the like)

Browser engine: WebKit(Safari & Chrome), Gecko(Firefox)

Thinking: At this point, the concept of DOM is still unclear, knowing that the DOM divides the document hierarchy (or tree) to facilitate the operation of the document, but where does the performance and function of the browser appear?

Second, the most basic grammar:

Guided reading: The most basic grammar, so just excerpt some feel not familiar before

Content:

1. There are several ways to initialize an array:

var array1 = Array ();    // empty array without length var array2 = Array (4);  // empty array with length var array3 = [];           // empty array without length var array4 = ["A", "B"];  // Normal array    　　　　　　　　　　　　　　　　　　　　　　　　

2. Using objects instead of arrays will greatly improve readability:

var a== "Xiaoming"= "Qixi";

3, the object is divided into: built-in objects, host objects, user-defined objects (IBID., the book said the reader himself play so not introduced)

Built-in object: is some JS has been defined by the object, have learned Java children's shoes can take this goods as Java Class , is system.currenttimemillis & New Person (). year, something like that.

Host object: Not provided by JS, but provided by the Code Runtime Environment (ie, browser!). ), with form, Image, element and document (JS big guy) , etc.

Thinking: After reading this chapter main harvest is in the object aspect, JS's document originally belongs to the host Object! What about window?

Thinking reply:

Book 3.2 is about window:

The Window object is the most basic object in the host object . window, which corresponds to the browser window itself, provides a variety of basic operating methods for the browser, such as open (), blur ().

Third, DOM:

Guidance: Concepts of ' D ', ' O ', ' M ', node manipulation, attribute manipulation (same directory)

Content:

1. Dom Concept:

' D ': web document = "Document object (manipulating object);

' O ': Same as chapter II = "CONTENT =" 3rd;

　　　　　　　　　　' m ': direct translation is ' model ' or ' map ', which is the ability to read DOM information through ' m '.

The role of DOM: a document = "a tree (a mathematical or programmatic hierarchical relationship)

The tree's model describes the relationships between the nodes in the document, so the document is also referred to as the " node tree "

2. Node operation

A, node type:

Use " node. NodeType" in JS to get the corresponding number, generally only get to 1 (element node), 2 (Attribute node), 3 (text node)

ELEMENT nodes:<body>, <p> such;

Attribute node: <p title= "I am attribute node">, bold position is an attribute node

Text node:<p> I am the text node </p> element node in the middle of the bold text contained in this way;

Three major node relationships:

　　　　

See also: NodeType

　　　　　　　　　　

Photo Gallery Case:

Best Practice:

Picture Library Advanced:

　　　　　　　　

---restore content ends---

The next project requires web-related knowledge, so under the guidance of Daniel to come to read this book.

Current level: Html&css&js basic master, can read the document and Google find the case to complete the front-end code writing, but not deep learning, HTML5&CSS3 new features, JS Basic & Framework are unfamiliar

Purpose of reading: Understanding the DOM concept and learning about the JS features through training and familiarity

Blog Purpose: Urge yourself to learn and record the process

Blog writing when reading progress: The end of the 6th chapter

Read the plan:

After browsing the catalogue, summarize the book Learning ideas are as follows (in fact, the dormitory directory):

Brief History-"The most basic grammar-" dom-"Dynamic Tag Creation-" Enrich the contents of the document (not copy)-"CSS dom-" JS Animation-"HTML5 features

456 This three chapter takes the picture library as the practice project to explain the program optimization, the separation, the compatibility and so on the question, the procedure is relatively simple, understands the result to be able to write oneself after the comparison with the book

Chapter 12 is a comprehensive example, not yet known

Start reading:

First, a Brief history:

Guidance: Basic Concepts

Content:

Dom Concept: A set of methods for Abstracting & conceptualizing The contents of a document, as well as a basic agreement for mutual recognition.

Dom Normalization: Allows any kind of programming Language to manipulate documents written in any one of the markup languages ! (Json&xml&xaml and the like)

Browser engine: WebKit(Safari & Chrome), Gecko(Firefox)

Thinking: At this point, the concept of DOM is still unclear, knowing that the DOM divides the document hierarchy (or tree) to facilitate the operation of the document, but where does the performance and function of the browser appear?

Second, the most basic grammar:

Guided reading: The most basic grammar, so just excerpt some feel not familiar before

Content:

1. There are several ways to initialize an array:

var array1 = Array ();    // empty array without length var array2 = Array (4);  // empty array with length var array3 = [];           // empty array without length var array4 = ["A", "B"];  // Normal array    　　　　　　　　　　　　　　　　　　　　　　　　

2. Using objects instead of arrays will greatly improve readability:

var a== "Xiaoming"= "Qixi";

3, the object is divided into: built-in objects, host objects, user-defined objects (IBID., the book said the reader himself play so not introduced)

Built-in object: is some JS has been defined by the object, have learned Java children's shoes can take this goods as Java Class , is system.currenttimemillis & New Person (). year, something like that.

Host object: Not provided by JS, but provided by the Code Runtime Environment (ie, browser!). ), with form, Image, element and document (JS big guy) , etc.

Thinking: After reading this chapter main harvest is in the object aspect, JS's document originally belongs to the host Object! What about window?

Thinking reply:

Book 3.2 is about window:

The Window object is the most basic object in the host object . window, which corresponds to the browser window itself, provides a variety of basic operating methods for the browser, such as open (), blur ().

Third, DOM:

Guidance: Concepts of ' D ', ' O ', ' M ', node manipulation, attribute manipulation (same directory)

Content:

1. Dom Concept:

' D ': web document = "Document object (manipulating object);

' O ': Same as chapter II = "CONTENT =" 3rd;

　　　　　　　　　　' m ': direct translation is ' model ' or ' map ', which is the ability to read DOM information through ' m '.

The role of DOM: a document = "a tree (a mathematical or programmatic hierarchical relationship)

The tree's model describes the relationships between the nodes in the document, so the document is also referred to as the " node tree "

2. Node operation

A, node type:

Use " node. NodeType" in JS to get the corresponding number, generally only get to 1 (element node), 2 (Attribute node), 3 (text node)

ELEMENT nodes:<body>, <p> such;

Attribute node: <p title= "I am attribute node">, bold position is an attribute node

Text node:<p> I am the text node </p> element node in the middle of the bold text contained in this way;

Attribute nodes are always included in the element node, and the text is always at the next level of the attribute node. Each node is an Object! Do not believe the TypeOf node try ~

There are many different types of nodes, as detailed in: NodeType

B, Operation node: (all document-specific functions)

getElementById (Idname) return a result-element object with corresponding ID

getElementsByTagName (tagname) return a collection of objects in an array--document that all elements are tagname

Getelementsbyclassname (classname) return a collection of all objects in the array--document that are named ClassName (this method is new in the HTML5 DOM)

* Here's a small thing to do, because HTML5 DOM provides getelementsbyclassname, so there may be browsers that don't. But I don't think so, so I can hand-getelementsbyclassname a

There are tutorials and code in the book, and I'll describe it:

3. Attribute manipulation

Getattribute&setattribute Get & Modify node properties.

The working mode of DOM is reflected here:

Load the static HTMLFirst, and then dynamically refresh with JS . Doing so refreshes the content of the page without needing to refresh it in the browser .

Thinking: Well, this chapter has nothing to think about, but to understand how the DOM handles the document & Review the basics of how the DOM provides: The following 4-6 chapters of the picture library practice

　　　　　　　　　　

Forwarding Please specify the source: http://www.cnblogs.com/qixi233/p/5525633.html

　　　　　

JavaScript DOM Programming Art Second Edition learning (1/4)