JavaScript DOM编程艺术读后感（二）

这星期感觉更加力不从心了，不光是学web，学其他的进展也比较小，效率真的好低了，希望下星期能重新振作起来，不要一直想其他的事了。。。。哇。。真滴烦。
1.document.write(方便快捷地把字符串插入到文档中）
2.innerHtml(读出元素的HTML内容，还可以把HTML内容写入元素，显示包括标签在内所有的内容，使用innerHTML属性，可以把JavaScript代码从标记中分离出来）
3.createElement（创建一个新元素）
4.appendChild（把新创建的节点插入到某个文档的节点树的最简单的方法，让它成为文档某个现有节点的一个子节点）
5.createTextNode（创建文本节点）
6.insertBefore(把一个新元素插入到一个现有元素的前面 举例 gallery.parentNode.insertBefore(placeholer,gallery)，变量gallery的parentNode属性值是body元素，placeholder元素被插入为body元素的新子元素，它被插入到兄弟元素gallery的前面，，，，gallery元素的parentNode属性值就是目标元素的父元素 )
根据所学的内容跟新的图片库的js代码
7insertAfter

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

8.AJax

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');
    }
}
addLoadEvent(getNewContent);

9.服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会再不同阶段更新readyState属性的值：
    0表示未初始化
    1表示正在加载
    2表示加载完毕
    3表示正在交互
    4表示完成
10访问服务器发送回来的数据要通过了两个属性完成，一个是responseText属性，这个属性用于保存文本字符串形式的数据。另一个属性是responseXML属性，用于保存Content-Type头部中指定位“text/xml”的数据，其实是一个DocumentFragment对象。.

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

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

function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  insertAfter(placeholder,gallery);
  insertAfter(description,placeholder);
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
    }
    links[i].onkeypress = links[i].onclick;
  }
}

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);