标签：
第六章 案例研究：图片库改进版
这一章将根据第五章提到的内容对图片库进行了改进
首先检查DOM方法是否被游览器支持
if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.getElementById("placeholder")) //.......类似的测试
接下来讲到了一个重点内容：共享onload事件
JavaScript往往需要在HTML文档加载结束后执行，不然一些dom方法会找不到对象,这就是为什么jquery
作者给出了一个有意思的方法，用于加载多个函数，这个方法看起来很简单，但其中思想需要仔细领悟，这本书中以后的几个方法的思路也是类似的
addLoadEvent函数
function addLoadEvent(func) { var oldonload=window.onload; if(typeof window.onload != ‘function‘){ window.onload=func; } else { window.onload= function (){ oldonload(); func(); } } }
1.把现有的window.onload事件处理函数存入变量oldonload.
2.如果在这个处理函数上还没有绑定任何函数，就向平时一样把函数添加给它.
3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有函数末尾.
三元操作符
variable(变量) = condition(条件) ? if true : if else;
可以看出三元操作符是if/else 的一种变体
nodeName属性
返回元素的标签名，总是返回大写字母比如IMG,P,A等html标签
第七章 动态创建标记
document.write()方法可以轻松的把字符串插入文档，但是它不能做到javascript完全与html分离，必须吧<script>放到<html>里。
innerHTML属性
该属性被浏览器广泛支持，既能用于读取，又能用于写入。
利用这个技术无法区分“插入一段html内容”与“写入一段html内容”。一旦使用innerHTML,它的全部内容将被替换。
<div id="test"> <p>this is <em>my</em> content.</p> </div> var text= document.getElementById("test").innerHTML alrert(text) // <p>this is <em>my</em> content.</p> <div id="test"> </div> document.getElementById("test").innerHTML = "<p>this is <em>my</em> content.</p>" //浏览器中会看到相应效果
DOM方法介绍
1.createElement方法
document.createElement(nodename);
创建一个元素节点，只不过属于文档碎片(document fragment),没有成为DOM节点树的一部分，需要被添加进DOM树。
2.appendChild方法
parent.appendChild(child)
把新创建的节点插入某个文档的节点树，让它成为这个文档某个现有节点的子节点。
3.createTextNode方法
document.createNode(text)
创建一个文本节点，注意它与createElement的差别。
现在innerHTML方法就能用上述几个DOM方实现了。
4.insertBefore()方法
parentElement.insertBefore(newElement,targetElement)
把一个新元素插入到一个现有元素的前面，必须告诉它父元素(parentElement)、新元素(newElement)、目标元素(targetElement)。
5.insertAfter()函数(DOM中没有此方法)
function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } }
parentNode属性：父节点；nextSibling属性：下一个兄弟元素节点；
这个函数十分简单，却效果很好。
Ajax
这是前端必须掌握的技能，现在页面已经离不开Ajax效果了，开发人员一般用jquery来处理这一行为，作者介绍了javasciprt方法
获取XMLHttpRequest对象，作者提供了兼容的方法，记下就好
function getHTTPObject(){ if(typeof XMLHttpRequest == "undefined") XMLHttpRequest = function(){ try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){} try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){} try {return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} return false; } return new XMLHttpRequest(); }
作者提供了一个例子：
function getNewContent(){ var request = getHTTPObject(); if(request){ request.open("GET","example.txt",true); request.onreadystatechange = function(){ if(request.readyState==4){ var para = document.createElement("p"); var txt = document.createTextNode(request.responseText); para.appendChild(txt); document.getElementById(‘new‘).appendChild(para); } }; request.send(null); } else{ alert(‘Sorry,your browser doesn\‘t support XMLHttpRequest‘); } } addLoadEvent(getNewContent);
当页面加载完成，以上代码发起一个GET请求，加载exemple.txt文件
request.open()
代码中的onreadystatechange是一个时间处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行
request.onreadystatechange = dosomething
然后就可以发送请求
reequest.send(null)
浏览器会在不同阶段更新readyState属性 0 代表未初始化 1 代表正在加载 2代表加载完毕 3代表正在交互 4表示完成。
在这个例子中readyState=4时，就会从requst里获取requestText内容
这一篇就到这里，Ajax内容在最后一章会有一个更详细的例子
《JavaScript DOM 编程艺术》（第二版）读书笔记（三）
标签：
原文地址：http://www.cnblogs.com/cz-parallel-space/p/4298830.html
