拿上AJAX（三）――DOM基础及DOM操纵HTML _HTML/CSS

拿下AJAX（三）――DOM基础及DOM操纵HTML

DOM的概念

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。[

Javascript中DOM实现可以使得我们在AJAX中通过Javascript代码对HTML和XML数据进行DOM方式的操作，从而做到页面的动态修改更新和数据的提取处理。

DOM对象树

DOM将每一个HTML或XML的文档都看待成内存中的一个对象树

浏览器中的一个页面对应一个HTML文档，因此有一颗与之对应的HTML的DOM树。

浏览器中一个页面可能处理很多个XML的文档，因此可能有很多颗XML的DOM树。

DOM对象树种的常用节点

在DOM树种文档内容对应了很多不同类型的节点，他们都是一个NODE对象。

DOM 代码中最常用的任务就是在页面的DOM树中导航。比方说，可以通过其“id”属性定位一个form，然后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素，以及其他HTML 元素（如img）和链接（a元素）。如果元素和文本是完全不同的类型，就必须为每种类型编写完全不同的代码。如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点，只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在DOM树中移动，就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时，如元素的属性，才需要对节点类型作专门处理。将DOM树中的所有对象都看作节点可以简化操作。记住这一点之后，接下来我们将具体看看DOM节点构造应该提供什么，首先从属性和方法开始。

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

接口	nodeType常量（IE不支持）	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点（标签）
Atrr	Node.ATTRIBUTE_NODE	2	属性节点（属性）
Text	Node.TEXT_NODE	3	文本节点（文本）
Comment	Node.COMMENT_NODE	8	注释节点（注释）
Document	Node.DOCUMENT_NODE	9	文本根节点

元素节点是文档中最常见的节点，HTML或XML文档中的标签<body>,<input>,<div>都对应DOM树中的元素节点。

属性节点表示的是一个元素节点上定义的某个属性，例如<input>中定义的value属性就对应DOM树种的一个属性节点。

文本节点表示文档中的一段文字信息，例如HTML文档中定义<div>abcdef</div>其中的“abcdef”就是一个文本节点。

注释节点对应文档中的注释信息，例如<!―Comment Message-->的内容就是一个注释节点。

根节点顾名思义，表示的整个文档的根，但是需要注意它不对应文档中的任何内容。

在Javascript中有一个特殊的对象document，它可以表示当前HTML页面的根节点。

DOM对象树不同节点的名值对比

节点	nodeName（节点名）	nodeValue(节点值)	nodeType值
Element元素节点	对应标签名的大写形式如：HTML	Null	1
Attr属性节点	文档中定义的属性名如：type	文档中定义的属性值如：button	2
Text文本节点	#text	文本内容如：133	3
Comment注释节点	#comment	注释内容如：comment	8
Document根节点	#document	Null	9

根节点的属性和方法：

属性	描述
documentElement	表示文档的根元素节点在HTML文档中，它表示<html>这个标签代表的元素节点
方法	描述
getElementById()	返回文档中具有制定id属性的Element节点
getElementById()	方法参数为节点的id的属性值
getElementByTagName（）	以数组方式返回文档中具有制定标签的Element节点，其书序为在文档中出现的顺序标签名指的是像body，table这样的HTML标签
getElementByTagName（）	方法参数为标签名称。
createElement()	用指定的标记名创建新的Element节点对象
createElement()	方法参数为节点标签的名字
createTextNode()	用指定的文本创建新的文本节点对象
createTextNode()	方法参数为文本信息
createAttibute()	用指定名字创建新的Attr节点对象
createAttibute()	方法参数为属性的名字
createComment()	用指定的字符串创建新的Comment节点对象
createComment()	方法参数为注释信息

<script type="text/javascript" >

            function testapi(){

                //获得根节点元素

                var htmlrootElement=document.documentElement;

                //获得指定的元素节点

                var divNode=document.getElementById("div1");

                //获得整个页面所有的div元素节点

                var divNodes=document.getElementsByTagName("div");

                //创建元素节点

                var newdivNode=document.createElement("div");

                

                //创建文本节点

                var newTextNode=document.createTextNode("aaaa");

            }

</script>

元素节点的属性和方法

属性	描述
tagName	元素节点对应的标签的大写名字，例<table>元素的标签名字为Table
方法	描述
getElementsByTabName()	以数组方式返回当前与元素节点的子孙节点中具有指定标签名的所有元素节点，其准许为在文档中出现的顺序
getElementsByTabName()	方法参数为节点的标签名
getAttribute()	以字符串形式返回指定属性的值
getAttribute()	方法参数为属性名称
getAttributeNode()	以属性节点对象的形式返回指定属性的值
getAttributeNode()	方法参数为属性名称
setAttribute()	设置指定的属性的值，如果该属性不存在则添加新属性
setAttribute()	方法的第一个参数为属性的名称方法的第二个参数为属性的值
setAttributeNode()	把指定的属性节点添加到该元素的属性列表中
setAttributeNode()	方法的参数为属性节点对象
has Attribute()	如果该元素具有制定名字的属性，则返回true
removeAttribute()	从元素节点中删除指定的属性
	方法参数为属性的名称
removeAttributeNode()	从元素节点的属性列表中删除指定的Attr节点
removeAttributeNode()	方法参数为属性的名称

元素节点的操作：

                //根据标签名获得元素节点

                var divNode2=document.getElementById("div2");

                var divNodes2=divNode2.getElementsByTagName("div");

                

                //操作属性

                var inputtext=document.getElementById("inputtext");

                var flag=inputtext.hasAttribute("value");

                inputtext.setAttribute("value", "aaacede");

                var textValue=inputtext.getAttribute("value");

                flag=inputtext.hasAttribute("value"); 

                inputtext.removeAttribute("value");

                alert("完成");

另一种操作元素属性的方法：

         //另一种操作元素属性的方法 

inputtext.value="另一种操作元素属性的方法";

两种方法的差异（以onclick事件为例）：

当我们操纵按钮单击事件时，第一种方式不显示结果，而第二种方式才显示

var clic=document.getElementById("clic"); 

//不显示结果，操纵无效

clic.setAttribute("onclick", function(){alert("不显示")});

//显示结果，操纵有效

 clic.onclick=function(){alert("显示")};

属性节点的属性和方法（因为很少用，所以这里就不举例了）：

属性	描述
Name	属性名
Value	属性值

所有节点（Node）都拥有的属性和方法

属性	描述
attributes	表示该节点的所有属性节点对象的数组
nodeType	代表节点的类型
nodeName	返回节点的名字
nodeValue	代表节点的内容
childNodes	当前节点的所有子节点数组，如果没有子节点，则返回空数组
parentNode	返回当前节点的父节点，如果没有父节点，则返回null
firstChild	返回当前节点的一个子节点，如果没有子节点，则返回null
lastChild	返回当前节点的最后一个子节点，如果没有子节点，则返回null
nextSibling	返回当前节点的下一个兄弟节点。如果没有这样的节点，则返回null
previousSibling	返回当前节点的上一个兄弟节点，如果没有这样的节点则返回null
方法	描述
hasChildNodes()	如果当前节点拥有子节点，则返回true
appendChild()	给当前节点增加一个子节点，增加的子节点位于当前节点的所有子节点的末尾
appendChild()	方法参数为Node对象
InsertBefore()	插入一个节点，为止在当前节点的指定子节点之前，如果指定子节点不存在，则执行效果和appendChild方法相同。如果插入的已经是当前节点的子节点，则将这个节点移动到指定节点前
InsertBefore()	方法第一个参数是要插入的节点。方法的第二个参数是当前节点的指定子节点，新插入的节点位于这个节点之前。
removeChild()	从文档树中删除当前节点的指定子节点，同时返回指定的子节点。
removeChild()	方法的参数是呀哦删除的子节点。
replaceChild()	用另一个节点替换当前节点的一个子节点，并且返回指定的子节点。
replaceChild()	方法第二个参数是新的子节点。方法第二个参数是被替换的子节点。
cloneNode()	复制当前节点，或者复制当前节点以及它的所有子孙节点。
cloneNode()	方法参数为true或false。True表示递归的复制所有子孙节点，false表示只复制当前节点。

             //所有节点属性代码演示：

                //返回元素节点包含的属性节点

                var attributes=inputtext.attributes;

                //nodeName nodeValue nodeType

                var inputName=inputtext.nodeName;

                var nodetype=inputtext.nodeType;

                var nodevalue=inputtext.nodeValue;

                

                //获取所有的子节点

                var childs=divNode2.childNodes;

                //获取父节点

                var parent=divNode2.parentNode;

                //获取第一个子节点和最后一个子节点

                var first=divNode2.firstChild;

                var last=divNode2.lastChild;

                

                //获取兄弟节点

                var next=divNode2.nextSibling;

                var last=divNode2.previousSibling;

                

                //判断是否有子节点

                var flag2=divNode2.hasChildNodes();

                //追加节点

                newdivNode.appendChild(newTextNode);

                divNode2.appendChild(newdivNode);

                var new2=document.createElement("div");

                var text2=document.createTextNode("insert");

                new2.appendChild(text2);

                divNode2.insertBefore(new2,divNode2.firstChild);

                

                var new3=document.createElement("div");

                var text3=document.createTextNode("insert3");

                new3.appendChild(text3);

                divNode2.insertBefore(new3, null);

                divNode2.insertBefore(new3,divNode2.firstChild);

                

                //移除节点

                var remove=divNode2.removeChild(new3);

                var new4=document.createElement("div");

                var text4=document.createTextNode("insert4");

                new4.appendChild(text4);

                //如果第一个参数曾经是当前节点的子节点，那么这个参数对应的节点会被移动到第二个参数对应的节点的位置。

                //第二个参数对应的节点被删除了。

                var replace=divNode2.replaceChild(new4,divNode2.getElementsByTagName("div")[0]);

               

               //clone节点

               var clone1=divNode2.cloneNode(true);

               var clone2=divNode2.cloneNode(false);

IE与FireFox的DOM对象树差异

1. IE会把一些没有在文档中定义的属性也加入DOM树。

2. IE不会把title中的文本内容加入DOM树。

3. IR会把换行缩进这样的信息过滤掉，FireFox则会认为是有用的文本内容，并作为文本节点的一部分加入DOM树。

4. IE不会把script标签中的内容加入DOM树，FireFox将里面的内容加入DOM树。

AJAX,DOM 和javascript的关系

DOM能够为javascript引擎公开网页。通过DOM，可以采用编程的方式操作文档的结构。Web页面的DOM表示是一个树状结构，由元素或点组成。节点可以包含很多子节点。javascript通过全局变量document公开当前Web叶梦得根节点，这个变量是所有DOM操作的起点。DOM使用容器的属性来做索引，而不是使用数字做索引。DOM中元素的关系可以看作是HTML清单的镜像。这种关系可以是双向的，修改DOM将改变HTML标记，随之会反映在页面的现实上。

用一个简单一点的关系表示就是：

DOM--数据--》Jquery--利用--》Ajax--请求--》后台
后台--回应Ajax请求--》Jquery--操作dom变现请求--》dom

同时推荐两篇博客：

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/index.html

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro5/index.html

2楼yingjiebohe昨天 19:31: 很清晰的DOM

1楼aboy123昨天 19:17: 收藏，以后用啊