JS DOM 编程艺术(第2版)读书笔记第7章动态创建标记-CSDN博客

第7章动态创建标记
传统的方法：document.write() 和 innerHTML (避免使用document.write())
深入剖析DOM方法：createElement、createTextNode、appendChild、inserBefore
createElement、createTextNode 创建出来的节点只是JavaScript世界里的孤儿, 利用appendChild insertBefore 把这些DocumentFragment对象插入到某个文档节点。

createElement(nodeName);
createTextNode(text);
parent.appendChild(child);

// 动态创建 "<p> This is <em>my</em> content.</p>"

 1 var p = document.createElement("p");
 2 var txt1 = document.createTextNode("This is ");
 3 var em = document.createElement("em");
 4 var txt2 = document.createTextNode("my");
 5 var txt3 = document.createTextNode(" content");
 6 p.appendChild(txt1);
 7 em.appendChild(txt2);
 8 p.appendChild(em);
 9 p.appendChild(txt3);
10 document.body.appendChild(p);

insertBerfore() 把一个新元素插入到现在元素前。
// ① 新元素 ② 目标元素 ③ 父元素
parentElement.insertBerfore(newElement, targetElement);

// 把p 插入到 body 的第一个div元素前
<div>div1</div>

1 var div = document.getELementsByTagName("div")[0];
2 var p = document.createElement("p");
3 var txt = document.createTextNode("insetBerfore");
4 var p.appendChild(txt);
5 document.body.inserBerfore(p, div);

// JavaScript 没有提供原生的把一个新元素插入到现在元素后。
// 自己写insertAfter();
// 用到的方法和属性：
/*
insertBefore()
parentNode
lastChild
appendChild
nextSibling
*/

1 function insertAfter(newElement, targetElement){
2     var parent = targetElement.parentNode;
3     if(parent.lastChild == targetElement){
4         parent.appendChild(newElement);
5     }else{
6         parent.inserBefore(targetELement.nextSibling);
7     }
8 }

 1 // window.onload 添加多个事件
 2 function addLoadEvent(func) {
 3     var oldonload = window.onload;
 4     if(typeof oldonload != "function"){
 5         window.onload = func;
 6     }else{
 7         window.onload = function(){
 8             oldonload();
 9             func();
10         }
11     }
12 }

Ajax: 对页面的请求以异步方式发送到服务器，核心是XMLHttpRequest。同源策略就是对象发送请求只能访问与其所在的HTML 处于一个域中的数据，不能向其它域发送请求。
Chrome 中如果使用 file://协议从自己的硬盘请求也会发生错误。

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

 1 function addLoadEvent(func) {
 2     var oldonload = window.onload;
 3     if(typeof oldonload != "function"){
 4         window.onload = func;
 5     }else{
 6         window.onload = function(){
 7             oldonload();
 8             func();
 9         }
10     }
11 }
12 
13 function getHTTPObject(){
14     if(typeof XMLHttpRequest == "undefinded"){
15         XMLHttpRequest = function(){
16             try{return new ActiveXObject("Msxml2.XMLHTTP6.0");}
17             catch(e){}
18             try{return new ActiveXObject("Msxml2.XMLHTTP3.0");}
19             catch(e){}
20             try{return new ActiveXObject("Msxml2.XMLHTTP");}
21             catch(e){}
22             return false;
23         }
24     }
25     return new XMLHttpRequest();
26 }
27 
28 /*
29  * readyState:
30  * 0 表示未初始化
31  * 1 表示正在加载
32  * 2 表示加载完成
33  * 3 表示正在交互
34  * 4 表示完成
35  */
36 function getNewContent() {
37     var request = getHTTPObject();
38     if(request){
39         request.open("GET", "example.txt", true);
40         request.onreadystatechange = function(){
41             // 脚本依赖服务器的响应必须放到这里
42             if(request.readyState == 4){
43                 var p = document.createElement("p");
44                 var txt = document.createTextNode(request.responseText);
45                 p.appendChild(txt);
46                 document.body.appendChild(p);
47             }
48         }
49         request.send(null);
50     }else{
51         alert("sorry you browser does't support XMLHttRequest");
52     }
53     alert("Function Done");
54 }
55 
56 addLoadEvent(getNewContent);