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可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...
  • Senior_lee
  • Senior_lee
  • 2014-08-05 09:50:56
  • 2140

ajax——dom对xml和html的操作

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

在DOM不用拼html代码变数据的技巧,ajax分页案例

在做一旅游网站的项目的时候,ajax更新页面数据的时候,不想拼html代码,灵感突然来了,想到了一个个人感觉很爽的办法。   就是在先取得原来网页中静态的DOM数据,然后保存在一个变量中,然后把原来...
  • clzmin
  • clzmin
  • 2016-07-05 10:51:39
  • 689

[学习笔记]JavaScript之DOM基础

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

DOM基础及DOM操作HTML

  • 2014年08月04日 21:10
  • 30KB
  • 下载

Ajax操作Dom的基础--节点的添加

function display(){var empty=document.getElementById("empty");addnode(empty,"hello");addnode(empty,"...
  • ukeychen
  • ukeychen
  • 2007-08-14 08:31:00
  • 1004

javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了,尤其是jquery出来之后,我们会发现操作DOM变得如此简单,但是也会有许多隐藏的坑,所以有时候操作DOM也并非想象中那么简单; 简单而常用的操作: 访问节点...
  • liaodehong
  • liaodehong
  • 2016-06-16 20:53:59
  • 2098

拿下AJAX(三)——DOM基础及DOM操纵HTML

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

Java网络爬虫--HTML DOM(HTML 基础)

最近一直在学习Java方面的网络爬虫,然后要使用Jsoup解析html页面(htmlparse已经不建议使用了),但是对于Jsoup中的很多类和方法都很疑惑,查阅相关资料后发现使用Jsoup之前首先要...
  • championhengyi
  • championhengyi
  • 2017-02-27 23:16:24
  • 1882
收藏助手
不良信息举报
您举报文章:AJAX技术入门 第三节 DOM基础和DOM操作HTML
举报原因:
原因补充:

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