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

转载 2012年01月15日 07:53:07

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

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" onclick="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 onload="inipage()">

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

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

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

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

body>

html>

 

运行结果:

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

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

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

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

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


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

相关文章推荐

AJAX入门---DOM操作HTML

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...

ajax——dom对xml和html的操作

dom对象对xml文档和html文档的操作,优点是可以在客户端更快速的,更直接的管理文档中的节点。缺点就是在不同的浏览器中对文档的操作和加载存在这差异。...

极客技术专题【006期】:jQuery初学者入门-DOM操作

日期:2013-8-12  来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第二期] 分享人:极客标签技术编辑 - Lana 授课时间:2013/08/15(本周...
  • jjfat
  • jjfat
  • 2013年08月12日 10:24
  • 773

DOM基础及相关HTML操作

DOM的概念 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XM...

jQuery基础教程之DOM操作-HTML&文本&值的操作

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。 这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。 html() ...

2014年辛星jquery解读第三节 Ajax

***************Ajax********************* 1.Ajax是Asynchronous Javascript And  XML的简写,它指的是异步Javascrip...

Maven学习第三节---Maven核心技术(一)

一:Maven依赖----依赖特性&依赖传递 在实际开发中,maven的依赖特性为最短路径选择和最先申明路径选择,当然,这些东西maven都已经帮我们处理好了,实际开发中我们是不需要操心这些的,了解...
  • Lee_Ho_
  • Lee_Ho_
  • 2017年06月07日 15:27
  • 111

ASP.NET MVC3 快速入门-第三节 添加一个视图

第三节 添加一个视图 在本节中我们修改HelloWorldController类,以便使用视图来向客户端展示HTML格式的响应结果。 我们使用ASP.NET MVC3中新增的Razor视图引擎来创建视...

HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)

(6)text-align-----文本对齐方式 A、text-align :Left;左对齐 B、text-align :right;右对齐 C、text-align :center;居中 D、te...

2014年度辛星完全解读html第三节

接下来我们继续学习HTML中的标签,希望大家能够再接再厉,同时辛星也会支持大家,我们一起努力,一起加油。我们本小节来认识另外几个标签。 *************空格和换行***********...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX技术入门 第三节 DOM基础和DOM操作HTML
举报原因:
原因补充:

(最多只允许输入30个字)