AJAX技术入门 第三节 DOM基础和DOM操作HTML

======================================================
注：本文源代码点此下载
======================================================

1.dom(document object model)被称作文档对象模型

它是语言和平台中立的接口,允许程序和脚本动态访问和更新文档的内容,结构和风格。

在ajax中,dom对于我们来说是html 和 xml 文档的一个应用程序接口,它可以把html,xml与ajax中的开发语言javascript连接起来。

javascript中的dom实现可以使得我们在ajax中通过javascript代码对html和xml数据进行dom方式的操作,从而做到页面的动态修改更新和数据的提取处理。

 

2.xml 和 html 的dom

html的dom和xml的dom在api接口上基本一致,使用差别不大,但本质上有区别。

html的dom是一个内存对象树,在浏览器中只保存一份,html的dom修改html的内容会直接反应到浏览器中;

而xml的dom则可以创建多个,每个可以对应一个xml文本。

 

3.dom 对象树

在dom眼中,html是由很多不同类型的节点组成的,这些节点都属于node对象。

node对象有一个nodetype的属性可用于判断节点类型

表格:

 

 

节点类型:

l元素节点是html中最常见的节点,页面中的,,

都是元素节点。

l属性节点表示的是一个元素节点的某个属性,例如中的value属性就可以被看作一个属性节点。

l文本节点表示html页面中的一段文字信息,例如

hello world

,其中的”hello world”就是一个文本节点。

l注释文本节点也比较好理解,html的注释信息,比如这样一段内容就是一个注释文本节点。

l根节点顾名思义,表示的是html的根,在javascript中有一个特殊的对象document,它可以表示html的根节点,

后面我们会介绍这个特殊对象有很多在ajax中非常常用的方法。

 

 

4.dom的api

根节点的属性和方法:

 

element节点的属性和方法:

 

(所有的)node 对象的属性:

 

方法列表:

 

insertbefore 既可以插入,还可以移动!功能很强!

 

使用 apanta studio 进行开发:

 

第一个测试代码:

html>

head>

script type="text/javascript">

function test(){

var rootnode = document.documentelement;//得到根节点

var div1 = document.getelementbyid("div1");//根据id得到指定的元素

var tagname = div1.tagname;//得到某个元素的tag名称

var divnodes = document.getelementsbytagname("div");//根据tagname得到所有的这种元素

var newnode = document.createelement("div");//创建一个新的div元素节点

var textnode = document.createtextnode("textnode");//创建一个新的文本节点

var text = document.getelementbyid("text");

var flag = text.hasattribute("value");//判断元素节点是否有某个属性

if(!flag){

text.setattribute("value","new value");//设置某个节点的属性值

}

text.removeattribute("value");//移除某个节点的某个属性

var nodename = text.nodename;//分别得到nodename,nodetype,nodevalue

var nodetype = text.nodetype;

var nodevalue = text.nodevalue;

var pre = text.previoussibling;//得到上一个和下一个兄弟节点以及父节点

var aft = text.nextsibling;

var parent = text.parentnode;

text.appendchild(textnode);//添加一个子节点

var first = text.firstchild;//得到第一个和最后一个子节点

var last = text.lastchild;

var remove = text.removechild(textnode);//移除子节点

alert("test");

}

script>

head>

body>

div id="div1">div1div>br>

input type="button" value="testapi" οnclick="test()">br>

input type="text" id="text">br>

body>

html>

在firefox中测试:

 

第二个测试代码:

html>

head>

meta http-equiv="content-type" content="text/html; charset=utf-8">

script type="text/javascript">

var i;

var body;

function inipage(){//页面加载时初始化页面,给一些参数附上初值

i = 0;

body = document.getelementsbytagname("body")[0];

}

function insert(){//插入一个新的节点,追加在body的子节点的末尾

var newdiv = document.createelement("div");//创建一个新的div元素节点

newdiv.innerhtml = "div " + i;

body.appendchild(newdiv);

i++;

}

function clone(){//克隆最后一个子节点

var nodes = body.getelementsbytagname("div");

if(nodes.length==0){

alert("没有可以克隆的节点!");

return;

}

//var newnode = nodes[nodes.length-1].clonenode(); //不行

//newnode = nodes[nodes.length-1];//这种方式是不行的

var newnode = document.createelement("div");//创建一个新的div元素节点

newnode.innerhtml = nodes[nodes.length-1].innerhtml;

body.appendchild(newnode);

}

function remove(){//移除最后一个节点

var nodes = body.getelementsbytagname("div");

if(nodes.length==0){

alert("没有可以删除的节点了!");

return;

}

body.removechild(nodes[nodes.length-1]);

}

function replace(){//将第一个节点和最后一个节点进行交换

var nodes = body.getelementsbytagname("div");

if(nodes.length"已经不用替换了!");

return;

}

var firstnode = nodes[0];

var lastnode = nodes[nodes.length-1];

var replace = body.replacechild(firstnode,lastnode);//用第一个节点去替换最后一个节点

body.insertbefore(replace,nodes[0]);

}

script>

head>

body οnlοad="inipage()">

input type="button" value="插入节点" οnclick="insert()">

input type="button" value="克隆节点" οnclick="clone()">

input type="button" value="移除节点" οnclick="remove()">

input type="button" value="替换节点" οnclick="replace()">

body>

html>

 

运行结果:

点击插入节点三次:显示出了三个div

点击 克隆节点两次:又出现了两个 div 2

点击移除节点:最后一个节点被移除了

点击 替换节点:第一个和最后一个节点位置发生了替换

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/