您的位置：首页 > Web前端 > HTML

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

2011-08-28 20:11 597 查看

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中最常见的节点，页面中的<body>,<input>,<div>都是元素节点。

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

l文本节点表示HTML页面中的一段文字信息，例如<div>Hello World</div>，其中的”Hello World”就是一个文本节点。

l注释文本节点也比较好理解，HTML的注释信息，<!—Comment Message-->比如这样一段内容就是一个注释文本节点。

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">Div1</div><br>
<input type="button" value="TestAPI" onclick="test()"><br>
<input type="text" id="text"><br>
</body>
</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

在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<2){
alert("已经不用替换了！");
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 2

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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