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^)/

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文...
  • jacobvv
  • jacobvv
  • 2015年01月18日 22:20
  • 1307

【AJAX进阶】--AJAX与DOM网页程序构建高手

上篇文章对AJAX的运行机制进行了解读,它是一种异步的JavaScript在执行请求时程序仍能够操作页面上的其他元素,相对于传统的网页(要等待上一次操作完成后才能进行下面的操作)增加了用户的体验度。另...
  • zhang_xinxiu
  • zhang_xinxiu
  • 2014年03月08日 11:05
  • 3239

DOM操作为什么慢?

DOM对象其实也是一个内存对象,为什么对DOM的操作这么慢? 其实是因为DOM操作会引起浏览器的render和paint操作, 而这两个操作比较耗时,所以造成对DOM操作比较慢。 关于rende...
  • yangnianbing110
  • yangnianbing110
  • 2016年04月20日 16:54
  • 982

使用table自带方法和DOM方法操作HTML table的区别

注:使用createDocumentFragment创建TABLE 行的效率要高 使用table自带方法和DOM方法操作HTML table的区别 table表格的操作有两种方法,...
  • hongweigg
  • hongweigg
  • 2015年01月05日 17:22
  • 1478

PHP中DOM操作

一个简单的例子
  • u012314976
  • u012314976
  • 2017年01月15日 18:00
  • 1920

DOM(一)——HTML DOM

对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了。而DOM是其中非常基础的知识,在学习AJAX的同时...
  • liujiahan629629
  • liujiahan629629
  • 2013年11月27日 20:45
  • 18480

js css html和DOM的关系和使用场景

html:作为网页的布局上的框架基础,用来编写网页的结构,即网页的组成元素和各元素之间层级关系。同时html中只有一系列已给定的类型作为基础构件,只能通过各元素的并置或叠套来组合各个元素。没有函数也不...
  • u014507230
  • u014507230
  • 2015年04月27日 15:07
  • 948

【Ajax】DOM基础及DOM操作HTML

DOM的概念     DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。就是HTML页面的模型,将每个标签都做...
  • jing18033612052
  • jing18033612052
  • 2016年09月23日 20:31
  • 286

AngularJS基础——样式指令、DOM操作指令及其它重要指令

AngularJS的样式指令: ng-classng-styleng-hrefng-srcng-attr-(suffix) AngularJS的DOM操作指令: ng-ifng-show ...
  • bboyjoe
  • bboyjoe
  • 2015年12月31日 17:57
  • 3179

php操作DOM的方法

1>DOM:xml dom---将xml转化成php可以操作的对象(xml来传递和存储一些数据)          Html dom---将html文档转化成js可以操作的对象(js用来实现浏览器的...
  • lt15032237182
  • lt15032237182
  • 2013年03月13日 19:55
  • 3152
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX技术入门 第三节 DOM基础和DOM操作HTML
举报原因:
原因补充:

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