《JavaScript DOM编程艺术》学习笔记（二）详解编程语言

终于开始接着写我的读书笔记了。

17、DOM有insertBefore方法，但并没有提供insertAfter()方法。不过可利用已有的DOM方法和属性编写此函数：

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

18、为兼容所有浏览器，getHTTPObject函数应这样写：

function getHTTPObject() { 
    if(typeof XMLHttpRequest == "undefined") { 
        XMLHttpRequest = function() { 
            try{return new ActiveXObject('Msxml2.XMLHTTP.6.0'); 
                }catche(e){} 
            try{return new ActiveXObject('Msxml2.XMLHTTP.3.0'); 
                }catche(e){} 
            try{return new ActiveXObject('Msxml2.XMLHTTP'); 
                }catche(e){} 
            return false; 
        } 
    return new XMLHttpRequest(); 
}

　　getHTTPObject通过对象检测技术检测了XMLHttpRequest。若失败，则继续检测其他方法，最终返回false或一个新的XMLHttpRequest(或XMLHTTP)对象。

　　XMLHttpRequest对象有许多的方法。其中最有用的是open方法，它用来指定服务器上将要访问的文件，指定请求类型：GET、POST或SEND。SEND参数用于指定请求是否以异步方式发送和处理。

　　添加代码：

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("抱歉，你的浏览器不支持XMLHtppRequest。"); 
    } 
}

当页面加载完成后，以上代码会发起一个GET请求，请求与ajax.htm文件位于同一目录的example文件。

代码中的onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。

下面的代码会在onreadystatechange被触发时执行名为doSomething的函数：

（注意：在为onreadystatechange指定函数引用时，不要在函数名后面加括号。因为加括号表示立即调用函数，而此时只想把函数资深的引用（而不是函数结果）赋值给onreadystate-change属性。）

request.onreadystatechange = doSomething;

在指定了请求的目标，也明确了如何处理响应指挥，就可以用send方法来发送请求了：

request.send(null)

19、服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值，它有5个可能的值：

　　0表示未初始化      1 正在加载      2 加载完毕     3 正在交互      4 完成

只要readyState属性的值变为4，就可以访问服务器发送回来的数据了。

访问服务器发送回来的数据要通过两个属性完成。一是responseText属性，它用于保存文本字符串形式的数据。一是responseXML属性，用于保存Content-Type头部中指定为”text/xml”的数据，其实是一个DocumentFragment对象。这也正事XMLHttpRequest这个名里有XML的原因。

在此例中，onreadystatechange事件处理函数在等到readyState变成4之后就会从responseText属性取得文本数据，然后把数据放到一个段落中，再将其添加到DOM中。

20、异步请求有一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回。

21、AJAX之挑战

总的来说，Ajax技术给我们带来了很多好处。利用它可以增强站点可用性，用户无需刷新页面，从而可以很快地得到响应。

Ajax应用的一个特色就是减少重复加载页面的次数。但这种缺少状态记录的技术会与浏览器的一些使用管理产生冲突，导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。

只更新部分页面区域的特性也会影响到用户的预期。理想情况，用户的每一次操作都一个得到一个清晰明确的结果。为此，Web设计人员必须在向服务器发出请求和服务器返回响应时，给用户明确的提示。

要构建成功的Ajax应用，关键在于将Ajax功能看做一般的JS功能，在平稳退化的基础上求得渐进增强。

22、注意：某些浏览器要根据DOCTYPE来决定使用标准模式还是使用兼容模式来呈现页面。兼容模式意味着浏览器要模仿某些早期浏览器的“怪异行为”，并容许那些不规范的页面在新浏览器也能正常工作。一般来说，应该坚持使用标准模式，避免触发兼容模式。

23、编写一个循环，对创建的defs数组进行遍历。

for(variable in array)

第一次循环时，变量variable将被赋值为数组array的第一个元素的下标志。第二次循环时，变量variable被赋值为数组array的第二个元素的下标值。

24、为了日后能够方便地把多个事件添加到window.onload处理函数上，最好使用addLoadEvent函数来完成这一项工作。

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if(typeof window.onload!='function') { 
        windows.onload = func; 
    }else{ 
        window.onload = function() { 
            oldonload(); 
            func(); 
        } 
    } 
}

25、注意：在编写DOM脚本时，会想当然地认为某个节点肯定是一个元素节点，这是一种相当常见的错误。如果没有百分百的把握，就一定要去检查nodeType属性值。有很多DOM方法只能用于元素节点，如果用在了文本节点身上就会出错。

26、得到最后一个元素节点语句：

var qElement = quotes[i].getElementsByTagName('*'); 
var elem = qElements[qElements.length - 1];

27、隔行设置样式：

（1）把文档里所有table元素找出来。

（2）对每个table元素，创建变量odd并把它初始化为false。

（3）遍历这个表格里的所有数据行。

（4）如果odd值为true，设置样式并把其改为false。

（5）如果odd值是false就改为true。

var tables = document.getElementsByTagName('table'); 
var odd,rows; 
for(var i =0; i < tables.length; i++) { 
    odd = false; 
    rows = tables[i].getElementsByTagName('tr'); 
    for(var j = 0; j < rows.length; j++) { 
        if(odd == true) { 
            rows[j].style.backgroundColor = red; 
            odd = false; 
        } 
    } 
}

28、鼠标指针悬停：

function highlight() { 
    var rows = document.getElementsByTagName('tr'); 
    for(var i = 0; i < rows.length; i++) { 
        rows[i].onmouseover = function() { 
            this.style.backgroundColor = green; 
        } 
        rows[i].onmouseover = function() { 
            this.style.backgroundColor = white; 
        } 
    } 
}

29、把一个非常具体的东西改进为一个较为通用的东西的过程成为抽象（abstraction）。

30、JS函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。它带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，以ms为单位设定需经过多长时间才执行。

若想取消正在排队等待执行的函数，就必须实现把setTimeout函数的返回值赋给一个变量。可以用clearTimeout函数来取消“等待执行”队列里的某个函数。

31、parseInt可以把字符串里的数值信息提取出来。如果把一个以数字开头的字符串传递给这函数，它将返回一个数值：

parseInt(string)

parseInt函数的返回值通常是整数。若要提取浮点数，就应该使用parseFloat函数。

32、CSS的overflow属性用来处理一个元素的尺寸超出其容器尺寸的情况。

visible：不裁剪溢出的内容。浏览器将把溢出的内容显示在容器的区域以外，全部内容可见。

hidden：隐藏。内容只显示在元素的显示区域里，意味着只有一部分可见。

scroll：类似于hidden，对溢出的内容进行隐藏，但显示一个滚动条以便能滚动看内容的其他部分。

auto：类似于scroll，但浏览器只在发生溢出时才显示滚动条。

33、每当用户把鼠标悬停在某个链接上，不管上一次调用是否已将图片移动到位，moveElement函数都会被再次调用并师徒把这个图片移动到另一个地方去。于是当用户在链接之间快速移动鼠标时，movement变量就会像一条拔河绳哪有来回变化，而moveElement函数就会试图把图片同时移动到两个不同的地方去。

如果用户移动鼠标的速度够快，积累在setTimeout队列里的事件就会导致动画效果产生滞后。为了消除动画滞后的现象。可用下列函数清除积累在setTimeout队列里的事件

clearTimeout(movement);

可是，如果在还没有设置movement变量时就执行这条语句，会有个错误。

但不能使用局部变量：

var movement = setTimeout(repeat,interval);

如果这样做，clearTimeout函数调用语句将无法工作，因为局部变量movement和clearTimeout函数在上下文里不存在。

也就是说，既不能用全局变量，也不能用局部变量。需要一种介于二者直接的东西，需要一个只与正在被移动的那个元素有关的变量。

只与某个特定元素有关的变量是存在的。事实上，我们一直在使用，就是“属性”。

到目前为止，我们一直在使用由DOM提供的属性，如element.firstChild、element.style，等等。JS允许我们为元素创建属性：

element.property = value

只要愿意，完全可以创建一个名为foo的属性并把它设置为”bar”:

element.foo = "bar";

这很像是在创建一个变量，但区别是这个变量专属于某个特地的元素。

我们把变量movement从一个全局变量改变为正在被移动的那个元素（elem元素）的属性。这样以来，就可以测试它是否已经存在，并在存在的情况下使用clearTimeout函数。