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 ?

1. //添加节点
2. varindex=0;
3. functionappendnode(){
4. //找到body对应节点
5. varhtmlNode=document.documentElement;
6. varbodyNode=htmlNode.lastChild;
7. //新建节点
8. vardivNode=document.createElement("div");
9. vartextNode=document.createTextNode("我是一个新加入的节点"+index++);
10. //建立节点之间的关系
11. divNode.appendChild(textNode);
12. bodyNode.appendChild(divNode);
13. }

//添加节点
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 ?

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

//插入节点
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 ?

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