《DOM Scripting》 - 阅读笔记

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);
插入元素到已存在元素的后面
这个方法是自己作者写的

 function insertAfter(newElement,targetElement) {
     var parent = targetElement.parentNode;
     if (parent.lastChild == targetElement) {
         parent.appendChild(newElement);
         } else {
     parent.insertBefore(newElement,targetElement.nextSibling);
     }
 }    

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();

为了同时满足上述两种实现，写一个函数来解决：

 function getHTTPObject(){
     if(window.ActiveXObject){
         var waystation = new ActiveXObject("Microsoft.XMLHTTP");
     } else if(window.XMLHttpRequest){
         var waystation = new XMLHttpRequest();
     } else {
         var waystation = false;
     }
     return waystation;
 }

XMLHttpRequest对象有许多方法，其中最有用的是open。
open方法用来指向服务器上文件对象，也可指定HTTP请求：GET,POST,SEND，第三个参数指定是否请求是同步的。
初始化GET请求：请求一个example.txt文件
request.open("GET","example.txt",true);

当服务器返回响应，触发onreadystatechange事件处理器，将会调用执行doSomthing。

 request.onreadystatechange = doSomthing
 request = getHTTPObject();
 request.open("GET","example.txt",true);
 request.onreadystatechange = doSomething;
 request.send(null);

需要写一个doSomething函数来处理响应。
当服务器返回响应到XMLHttpRequest对象，大量属性就可以使用了。
readyState属性是一个实时更新的数字值当服务器处理请求时：
0 uninitialzed
1 loading
2 loaded
3 interactive
4 complete
当readyState属性值为4，则可以访问服务器返回的数据了。
通过responseText属性来以字符串文本的形式访问数据。如果返回数据Content-Type头为"text/html"，则也可以用responseXML属性来访问。

 function doSomething(){
     if(request.readyState == 4){
     alert(request.responseText);
     }
 }

渐进增强的Ajax

Ajax的成功表明一件事：一个简洁的名字有助于理解一个想法。Ajax比“具有DOM脚本，CSS和HTML的XMLHttpRequest”更容易理解，那么我用Hijax来代替“渐进增强的Ajax”也是简化理解。

Ajax的能力依赖服务器，服务端编程语言做了大部分实际工作。XMLHttpRequest就像是一个在浏览器和服务器之间的网关（gateway），传输请求和响应。如果网关被移除了，仍可以发送请求和接受响应，但时间更长。