Comments on JavaScript DOM programming art and a summary

It's not a very busy job lately, think about it. The internal composition of JavaScript and some of the main points, that is, from this book began. Good for beginners, easy to understand.

The simple end of my re-reading some of the points learned.

Here are the main points for individual learning:

1. Give yourself a fallback, now the browser basically support JavaScript, but there may be some browsers do not support or how, after all, I have not experienced that era. The author of this approach is very strong, regardless of your browser support or do not support JavaScript, the basic information of the site you can see, do not appear do not support JavaScript can see nothing. Example:

<a href= "http://www.cnblogs.com/" onclick= "popUp (' http://www.cnblogs.com ');" >Example</a>

When the href attribute is set to a URL address that is really present, both JavaScript is disabled and the link is available; this is a typical "fallback" example;

It may not be used now, but you can learn the way to think about the problem.

2.DOM of some theoretical knowledge, through the setattribute () method to make changes to the document, will make the document in the browser window display effect and/or behavior of the corresponding changes, but we are in the browser's view source (view the code) option to see the source code of the document will still be the original property value-that is, the changes made by the SetAttribute () method are not reflected in the source code of the document itself. This "duplicity" phenomenon stems from the DOM's working mode: loading the static content of the document, and then dynamically refreshing them, dynamic refresh does not affect the static content of the document.

3. The array returned by the ChildNodes property contains all types of nodes, all of the element nodes, and all the attribute nodes and text nodes are included. In fact, almost everything in the document has a node-even spaces and line breaks are interpreted as nodes, and they are all contained in the array returned by the ChildNodes property.

4.Node Types

Documents, elements, attributes, and other aspects of the HTML or XML document have different node types.

There are 12 different node types, which may have child nodes of different node types:

node Type		Description	child Nodes
1	Element	Represents an Element	Element, Text, Comment, ProcessingInstruction, Cdatasection, EntityReference
2	Attr	Represents a property	Text, EntityReference
3	Text	Represents the text content in an element or attribute.	None
4	Cdatasection	Represents a CDATA section in a document (text that is not parsed by the parser).	None
5	EntityReference	Represents an entity reference.	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference
6	Entity	Represents an entity.	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference
7	ProcessingInstruction	Represents a processing instruction.	None
8	Comment	Represents a comment.	None
9	Document	Represents the entire document (the root node of the DOM tree).	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	To provide an interface to an entity defined for a document	None
11	DocumentFragment	Represents a lightweight document object that can hold a portion of a file	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference
12	Notation	Represents the symbol declared in the DTD.	None

Node Type-return value

For each node type, the return value of the NodeName and NodeValue properties:

node Type		NodeName return	NodeValue return
1	Element	Element name	Null
2	Attr	Property name	Property value
3	Text	#text	The contents of the node
4	Cdatasection	#cdata-section	The contents of the node
5	EntityReference	Entity reference name	Null
6	Entity	Entity Name	Null
7	ProcessingInstruction	Target	The contents of the node
8	Comment	#comment	Comment Text
9	Document	#document	Null
10	DocumentType	Document type name	Null
11	DocumentFragment	#document fragments	Null
12	Notation	Symbol name	Null

Nodetypes-named Constants

NodeType	Named Constant
1	Element_node
2	Attribute_node
3	Text_node
4	Cdata_section_node
5	Entity_reference_node
6	Entity_node
7	Processing_instruction_node
8	Comment_node
9	Document_node
10	Document_type_node
11	Document_fragment_node
12	Notation_node

5. The early onload, which is now not encapsulated, is still recorded to see what the principle is to perform:

function Addloadeven (func) {

var oldonload = window.onload;

if (typeof window.onload! = ' function ') {

Window.onload = func;

}else{

Window.onload = function () {

Oldonload ();

Func ();

}

}

}

6. The parties also do not have DOM methods and properties to insert a node behind another node. A brief introduction to the following InsertAfter () function:

function InsertAfter (newelement,targetelement) {

var parent = Targetelement.parentnode;

if (Parent.lastchild = = targetelement) {

Parent.appendchild (newelement);

}else{

Parent.insertbefore (newelement,targetelement.nextsibling);

}

}

7. Remember that JavaScript script values should be used to enrich the content of the document, avoiding the use of DOM technology to directly insert core content. Very real example, I now this company project is to use this experience, the main content of the basic not a few div to solve, the other is dynamic add in, angular.js this point more powerful.

8. Sometimes it's easy to confuse when CSS and JavaScript are used, or where to use them, here's a basic principle:

If you want to change the rendering of an element, you should choose CSS, and if you want to change the behavior of an element, you should use the DOM, or JavaScript, to control the behavior;

Summary: Probably on these I think the need to record, after a good review of the main points, the book is really a miracle of mankind, the knowledge of predecessors can drive future generations of people.

Comments on JavaScript DOM programming art and a summary