AJAX入门---DOM操作HTML

一边学习AJAX一边坐着总结加深印象，上次写的是怎样简单的使用XMLHttpRequest对象。今天写的是DOM（文档对象模型(Document Object Model)）操作HTML，希望我的博客对大家的学习可以起到帮助作用。

         一．什么是​​DOM​​

         文件对象模型（Document Object Model，简称​​DOM​​）。是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM能够以一种独立于平台和语言的方式訪问和改动一个文档的内容和结构。换句话说。这是表示和处理一个HTML或XML文档的经常用法。

         二．简单的操作HTML

         今天的样例实现前我们先须要了解DOM的经常使用节点和经常使用API，样例中通过动态的向HTML中加入元素节点达到学习的目的。

         终于效果

         加入节点实现

[plain] ​​view plain​ ​​​copy​​​​print​​​​?​​

2. //加入节点  
3. var index = 0;  
4. function appendnode() {  
5.     //找到body相应节点  
6.     var htmlNode = document.documentElement;  
7.     var bodyNode = htmlNode.lastChild;  
8.     //新建节点  
9.     var divNode = document.createElement("div");  
10.     var textNode = document.createTextNode("我是一个新加入的节点" +index++);  
11.     //建立节点之间的关系  
12.     divNode.appendChild(textNode);  
13.     bodyNode.appendChild(divNode);  
14. }  

//加入节点
var index = 0;
function appendnode() {
    //找到body相应节点
    var htmlNode = document.documentElement;
    var bodyNode = htmlNode.lastChild;
    //新建节点
    var divNode = document.createElement("div");
    var textNode = document.createTextNode("我是一个新增加的节点" +index++);
    //建立节点之间的关系
    divNode.appendChild(textNode);
    bodyNode.appendChild(divNode);
}

         插入节点实现

[plain] ​​view plain​ ​​​copy​​​​print​​​​?​​

2. //插入节点  
3. function insertnode() {  
4.     var removenode = document.getElementById("remove");  
5.     var firstdivnode = removenode.nextSibling;  
6.     while (firstdivnode) {  
7.         if (firstdivnode&& firstdivnode.nodeName == "DIV") {  
8.             var newnode =document.createElement("div");  
9.             var textnode =document.createTextNode("我是一个新增加的节点" + index++);  
10.             newnode.appendChild(textnode);  
11.            document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);  
12.             break;  
13.         }  
14.         firstdivnode =firstdivnode.nextSibling;  
15.     }  
16. }  

//插入节点
function insertnode() {
    var removenode = document.getElementById("remove");
    var firstdivnode = removenode.nextSibling;
    while (firstdivnode) {
        if (firstdivnode&& firstdivnode.nodeName == "DIV") {
            var newnode =document.createElement("div");
            var textnode =document.createTextNode("我是一个新增加的节点" + index++);
            newnode.appendChild(textnode);
           document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);
            break;
        }
        firstdivnode =firstdivnode.nextSibling;
    }
}

         移除节点实现

[plain] ​​view plain​ ​​​copy​​​​print​​​​?​​

2. function removenode() {  
3.     //1.找到body  
4.     //2.找到须要被移除的那个div  
5.     //3.调用remove方法移除节点  
6.    
7.     var bodynode = document.getElementById("remove").parentNode;  
8.     var removenode = document.getElementById("remove");  
9.     var firstdivnode = removenode.nextSibling;  
10.     while (firstdivnode) {  
11.         if (firstdivnode&& firstdivnode.nodeName == "DIV") {  
12.             bodynode.removeChild(firstdivnode);  
13.             break;  
14.         }  
15.         firstdivnode = firstdivnode.nextSibling;  
16.     }  
17. }