标签：
最近工作不是很忙就想想想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 去控制行为；
总结：大概就这些我觉的需要记录一下，以后好复习的要点，书真的是人类的一大奇迹，前人的知识能带动后代的人。
标签：
原文地址：http://www.cnblogs.com/qiuzhimutou/p/5146426.html
