一．什么是DOM

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

二．简单的操作HTML

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

最终效果

添加节点实现

//添加节点
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);
}

插入节点实现

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

移除节点实现