DOM Scripting - Web Design with JavaScript and the Document Object Model,Jeremy Keith
中文名：JavaScript DOM 编程艺术
用了一周的时间看完了这本书，其实内容还是很简单的，顺便用来学习英语，积累了一些单词。
读完一本书不容易，总要做些记录，才够本儿。
DOM，文档对象模型，D表示文档，web页面；D表示对象，document对象；M表示模型，浏览器提供的一种web页面的映射（模型），你可用JavaScript来读写该映射。（生硬的翻译。。。）
JavaScript中有三种对象：用户定义的对象，JavaScript中内置的对象和浏览器提供的对象（Host Object）。
浏览器提供的最基本的是window对象，该对象就表示一个浏览器窗口。window对象的方法和属性通常通过浏览器对象模型（BOM）来引用。
document对象表示html文档，而本书的主题就是讨论document对象的属性及方法。
一个文档就是一些结点的集合，这些结点组成树状结构，称为文档树。一个文档就是一个结点树。
结点类型包括元素结点，文本结点，属性结点。
1. document.write
document对象的write方法提供了一个简单快速的方式来插入一个字符串到文档。
2. innerHTML
浏览器引入的innerHTML属性，用于读写元素内的HTML。
使用innerHTML，元素内的HTML将全部被替换。
innerHTML比document.write更好。使用innerHTML能保持JS和标记的分离，不必插入<script>标记
找到结点
1. element = document.getElementById(ID);
根据id获得元素结点，如果不存在则返回null
2. element = document.getElementByTagName();
根据标签获得结点的数组。
3. booleanValue = element.hasChildNodes;
判断是否有子结点。
文本结点和属性结点没有子结点，所以应用该方法返回false。
4. object.getAttribute(attribute);
获得属性结点。
若没有该结点，则返回null
操作结点
1. var para = document.createElement("p");
创建元素结点
2. var txt = createTextNode("Hello World");
创建文本结点
3. para.appendChild(txt);
txt结点作为子结点插入到para中
4. reference = element.insertBefore(newNode,targetNode);
插入元素到已存在元素的前面
如果不指定targetNode，则插入到element的子结点的末尾。
5. paraElement.insertAfter(newElement,targetElement);
插入元素到已存在元素的后面
这个方法是自己作者写的
1 function insertAfter(newElement,targetElement) {
2 var parent = targetElement.parentNode;
3 if (parent.lastChild == targetElement) {
4 parent.appendChild(newElement);
5 } else {
6 parent.insertBefore(newElement,targetElement.nextSibling);
7 }
8 }
6. reference = node.cloneNode(true)
复制结点，并复制子结点
reference = node.cloneNode(false)
复制结点，但不复制子结点
7. reference = element.removeChild(node)
移除结点并返回该节点，该结点的子结点也被删除。
8. reference = element.replaceChild(newChild,oldChild)
替换element的子结点oldChild.
如果新结点有子结点，也被插入到文档中
结点属性
1. name = node.nodeName;
获得结点的名字
2. integer = node.noteType;
获得结点的类型
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_NOD
3. value = node.nodeValue;
获得结点值。
若为属性结点，返回属性值，若为文本结点，则返回文本内容，若为元素结点，则返回null。
示例：获得段落内的文本<p>这是一段文本</p>
description.childNodes[0].nodeValue
分析：首先获得p的子结点—文本结点，然后得到文本结点的值——文本。因为段落内的文本是一个不同的结点，这个文本是段落的第一个子结点
4. object.setAttribute(attribute,value)
设置结点属性及其值
遍历结点树的方法
1. nodeList = node.childNodes
获得子结点的列表
2. node.childNotes.length
获得子结点的数量
3. reference = node.firstChild
获得第一个子结点
4. reference = node.lastChild
获得最后一个子结点
5. reference = node.nextSibling
获得下一个结点
6. reference = node.previousSibling
获得上一个结点
7. reference = node.parentNode
获得父结点
操作CSS
每个元素都是一个对象，每个对象都有一些属性。
其中一些属性表示结点在结点树中的位置信息，比如：parentNode,childNotes等等。
还有一些属性，包含元素本身的信息，比如：nodeType和nodeName
还有一些属性，叫做样式属性，包含了该元素的样式。查询样式属性返回一个对象，JavaScript通过读写该对象可以控制元素的样式。
element.style.preperty
JavaScript会把"-"当作减号，所以采用驼峰命名法来引用样式属性，下面是一些示例
| CSS |
JavaScript |
|---|---|
| color | color |
| font-family | fontFamily |
| background-color | backgroundColor |
| font-weight | fontWeight |
| margin-top-width | marginTopWidth |
也可以使用类名属性来控制元素的样式
1. element.className
如果原来已有类名，可以这样写来添加类
2. element.className += "intro"
动画
1. variable = setTimeout("function",interval)
一段时间后执行函数
2. clearTimeout(variable)
取消延迟启动
1. variable = setInterval("function",interval);
每隔一段时间执行函数
2. clearInterval(variable)
取消重复执行
3. parseInt
把字符串转换为整数
4. parseFloat
把字符串转换为浮点数
Ajax
XMLHttpRequest对象
IE创建语法
var waystation = new ActiveXObject("Microsoft.XMLHTTP");
其他浏览器语法：
var waystation = new XMLHttpRequest();
为了同时满足上述两种实现，写一个函数来解决：
1 function getHTTPObject(){
2 if(window.ActiveXObject){
3 var waystation = new ActiveXObject("Microsoft.XMLHTTP");
4 } else if(window.XMLHttpRequest){
5 var waystation = new XMLHttpRequest();
6 } else {
7 var waystation = false;
8 }
9 return waystation;
10 }
XMLHttpRequest对象有许多方法，其中最有用的是open。
open方法用来指向服务器上文件对象，也可指定HTTP请求：GET,POST,SEND，第三个参数指定是否请求是同步的。
初始化GET请求：请求一个example.txt文件
request.open("GET","example.txt",true);
当服务器返回响应，触发onreadystatechange事件处理器，将会调用执行doSomthing。
1 request.onreadystatechange = doSomthing
2 request = getHTTPObject();
3 request.open("GET","example.txt",true);
4 request.onreadystatechange = doSomething;
5 request.send(null);
需要写一个doSomething函数来处理响应。
当服务器返回响应到XMLHttpRequest对象，大量属性就可以使用了。
readyState属性是一个实时更新的数字值当服务器处理请求时：
0 uninitialzed
1 loading
2 loaded
3 interactive
4 complete
当readyState属性值为4，则可以访问服务器返回的数据了。
通过responseText属性来以字符串文本的形式访问数据。如果返回数据Content-Type头为"text/html"，则也可以用responseXML属性来访问。
1 function doSomething(){
2 if(request.readyState == 4){
3 alert(request.responseText);
4 }
5 }
渐进增强的Ajax
Ajax的成功表明一件事：一个简洁的名字有助于理解一个想法。Ajax比“具有DOM脚本，CSS和HTML的XMLHttpRequest”更容易理解，那么我用Hijax来代替“渐进增强的Ajax”也是简化理解。
Ajax的能力依赖服务器，服务端编程语言做了大部分实际工作。XMLHttpRequest就像是一个在浏览器和服务器之间的网关（gateway），传输请求和响应。如果网关被移除了，仍可以发送请求和接受响应，但时间更长。