浅谈JavaScript DOM编程艺术读后感和一点总结

　　最近工作不是很忙就想想想JavaScript的内部组成和一些要点，就是从这本书开始的。对新手来说还好，简单易懂。

　　简单终结下我重书中学到的一些要点。

　　下面都是个人学习的要点提取：

　　1.给自己预留退路，现在浏览器基本都支持Javascript，但是当时可能有一些浏览器不支持还是怎么的，毕竟我没经历过那个年代。作者的这种做法很厉害，不管你的浏览器支持还是不支持Javascript，网站最基本的信息你是能看见的，不会出现不支持Javascript就什么都看不到。例子：

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

把href属性设置为真是存在的URL地址后，既是JavaScript已被禁用，这个链接也是可用的；这是一个典型的"预留退路"例子；

现在可能不会用到，但是可以学习这种思考问题的方式。

　　2.DOM的一些理论知识吧，通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为发生相应的变化，但我们在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是原来的属性值—也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自于DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。

　　3.由childNodes属性返回的数组包含着所有类型的节点，出来所有的元素节点，所有的属性节点和文本节点也包含在其中。事实上，文档里几乎每一样东西都有一个节点—甚至连空格和换行符都会被解释成节点，而它们也全部包含在childNodes属性所返回的数组当中。

　　4.Node Types

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：

节点类型		描述	子节点
1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2	Attr	代表属性	Text, EntityReference
3	Text	代表元素或属性中的文本内容。	None
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None
5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7	ProcessingInstruction	代表处理指令。	None
8	Comment	代表注释。	None
9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	向为文档定义的实体提供接口	None
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12	Notation	代表 DTD 中声明的符号。	None

节点类型 - 返回值

对于每种节点类型，nodeName 和 nodeValue 属性的返回值：

节点类型		nodeName 返回	nodeValue 返回
1	Element	元素名	null
2	Attr	属性名称	属性值
3	Text	#text	节点的内容
4	CDATASection	#cdata-section	节点的内容
5	EntityReference	实体引用名称	null
6	Entity	实体名称	null
7	ProcessingInstruction	target	节点的内容
8	Comment	#comment	注释文本
9	Document	#document	null
10	DocumentType	文档类型名称	null
11	DocumentFragment	#document 片段	null
12	Notation	符号名称	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.很早的onload，现在都不用封装了，但是还是记录以后能看看是什么原理来执行的：

function addLoadEven(func){

　　var oldonload = window.onload;

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

　　　　window.onload = func;

　　}else{

　　　　window.onload = function(){

　　　　　　oldonload();

　　　　　　func();

　　　　}

　　}

}　　

　　6.当事也没有DOM方法和属性把一个节点插入到另一个节点的后面。简单介绍下insertAfter()函数：

function insertAfter(newElement,targetElement){

　　var parent = targetElement.parentNode;

　　if (parent.lastChild == targetElement){

　　　　parent.appendChild(newElement);

　　}else{

　　　　parent.insertBefore(newElement,targetElement.nextSibling);

　　}

}

　　7.要记住JavaScript脚本值应该用来充实文档的内容，要避免使用DOM技术来直接插入核心内容。很实在的例子，我现在的这个公司项目就是用这种历练，最主要的内容基本没有几个DIV就解决了，其他全是动态添加进去，angular.js这点分的更厉害。

　　8.有时候我们容易混淆CSS和JavaScript到底什么时候用，或者在那里用，这里有个基本原则：

　　如果你想改变某个元素的呈现效果，就应该选用CSS；如果你想改变某个元素的行为，就应该选用DOM也就是JavaScript 去控制行为；

总结：大概就这些我觉的需要记录一下，以后好复习的要点，书真的是人类的一大奇迹，前人的知识能带动后代的人。