Javascript学习__DOM对象

浏览数：27 / 时间：2015年06月08日

DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是使用一系列互相关联的对象来表示这些代码,而这些代码可以被修改且无需重新解析代码就能直接访问它们.

DOM是语言无关的API,它的实现并不与java,javascript或者其他语言绑定.

一:DOM节点层次

　 DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面:

　　Document:最顶层的节点,所有的节点都是附属于它.

　　DocumentType:DTD引用的对象表现形式,它不能包含子节点.

　　DocumentFragment:可以像Document一样来保存其他节点.

　　Element:表示起始标签和结束标签之间的内容,例如:<tag></tag>或者<tag/>这是唯一可以同时包含特性和子节点的节点类型.

　　Attr:代表一堆特性名和特性值,这个节点类型不能包含子节点.

　　Text:代表XML文档中的起始标签和结束标签之间,或者Cdata Section内包含的普通文本.这个节点类型不能包含子节点.

　　CDatasection:这个节点类型仅能包含文本节点Text作为子节点.

　　Entity:表示在DTD中的实体定义,这个节点类型不能包含子节点.

　　EntityReference:代表一个实体引用,如果:&quot,这个节点类型不能包含子节点.

　　Processinstruction:代表一个API,这个节点类型不能包含子节点.

　　Comment:代表XML丨和i,这个节点类型不能包含子节点.

　　Notation:代表在DTD中定义的记号

Node接口定义了一些所有节点类型都包含的特性和方法:

　　特性/方法返回说明

　　　nodeName 　　　　string　　　　节点名字:根据节点的类型而定义

　　 nodeValue 　　　string　　　　　节点的值:根据节点类型而定义

　　 nodeType 　　　　 Number 　　　节点的类型常亮值之一.

　　　ownerDocument Document 指向这个节点所属的文档

　　　firstchild 　　　　 Node 　　　　指向在ChildNodes列表中的第一个子节点

　　　lastChild　　　　　　NodeList　　　所有子节点的列表

　　　previousSling　　　Node　　　　　　指向前一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null

　　 hasChildNodes() Boolean　　　　当childNodes包含一个或多个节点时,返回真.

　　 attributes　　　　　 NamedNodeMap 包含了代表一个元素的特性的Attr对象,仅用于Element节点

　　 appendChild(node) Node　　　　　　将node添加到childNodes的末尾

　　 removechild(node)　 node　　　　　将childNodes中删除node

　　　replaceChild 　　　　Node　　　　　　将childNodes中的oldNode替换成newNode

　　　insertbefore　　　　Node　　　　　　在childNodes中的refnode之前插入newnode

除了节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分.

NodeList:节点数组,按照数组进行索引,用来表示一个元素的子节点.

NameNodeMap:同时用数值和名字进行索引的节点表;用于表示元素特性.

二:特性语言的DOM

　 W3C开发了一种特别针对XHTML的DOM这个DOM定义了一个HTMLDocument和一个HTMLElement作为这种实现的基础,每个HTML元素通过它自己的HTMLElement类型来表示,例如:HTMLDIVElement代表了<div>

　普通的HTML并不是合法的XML,然后web依然可以将一个HTML文档解析为合适的DOM文档,但是在编写Web页面的时候最好使用XHTML代码,以消除那些坏的编码习惯.

　document对象是Bom的一部分,同事也是HTML DOM的HTMLDocument对象的一种表现形式,反过来说,它也是XML DOM Document对象.

 1 <html>
 2      <head>
 3          <script>
 4                  var ohtml = document.documentElement;
 5                  var ohead = ohtml.firstChild;//得到文档中的第一个节点   1
 6                  var olast = ohtml.lastChild;//得到文档中的最后一个节点   2
 7                  var ohead = ohtml.childNodes[0];//等价于1
 8                  alert(ohtml.childNodes.length);//得到下面的节点数
 9          
10          </script>
11     </head>
12     <body>
13 
14     </body>
15 </html>

View Code

三:检测节点类型

　通过NodeType特性检验节点类型.

　 alert(document.nodeType);//outputs 9 //9 是Node.DOCUMENT_NODE

　 alert(document.documentElement.nodeType);//outputs 1 //1 是Node.ELEMENT_NODE;

　这段代码在IE中是不支持的.可以通过定义匹配节点类型的常量来纠正这种情况.

　 if(typeof Node == "undefined"){

　　　　var Node = { ELEMENT_NODE:1 ,ATTRIBUTE_NODE:2........}

　　}　

四:处理特性

　 Node接口已具有attributes方法,且已被所有类型的节点继承,然后,只有Element节点才能有特性,ELement节点的attributes属性其实是NameNodeMap.它提供一些用于访问和处理其内容的方法.

　　getNamedItem(name):返回NodeName属性值等于name的节点.

　　removeNamedItem(name):删除nodeName属性值等于name的节点.

　　setNamedItem(node):将node添加到列表中,按其nodeName属性进行索引;

　　item(name):像NodeList一样,返回在位置pos的节点.

　　这些方法都是返回一个Attr节点,而非特性值.

　　DOM定义了三个元素方法来帮助访问特性:

　　getAttribute(name):等于attributes.getNameItem(name).value;

　　setAttributes(name,newvalue):等于attribute.getNameItem(name).value=newvalue

　　removeAttribute(name):等于attribute.removeNamedItem(name);

　　var sId = o.getAttribute("id");//获取id的特性

　　o.setattrbute("id","newid");

五:访问指定节点

　　DOM提供了一些方法来方便的访问指定的节点.

　　getElementsByTagName():用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的NodeList,在Element对象中,tagName特性总是等于小于号之后紧随的名称.例如:<img/>的tagName是"img",

　　var oImgs = document.getElementsByTagName("img");//返回所有的img元素的列表

　　var o = document.getElementsByTagName("*");//这行代码可以返回document中包含的所有元素而不管它们的标签名.

　　o[0].getattribute("value");//获取value中的值.

　　getElementsByName():它用来获取所有name特性等于指定值的元素的.

　　它们仅仅检查<intput/>和<img/>元素.

　　getElementById():返回id特性等于指定值的元素.在HTML中id特性是唯一的.这意味着没有两个元素可以共享同一个id.

六:创建和操作节点.

　　1:创建新节点.

　　DOM Document中的一些方法用于创建不同类型的节点,即便在所有的浏览器中的浏览器document对象并不需要全部支持所有的方法

　　最常用的几个方法是:createDocumentFragment(),createElement()和createText-Node();

 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             function createchild(){
 5             //将文本节点添加到节点中,可以使用appendChild()方法来完成.它的用途是将给定的节点添加到某个节点的childNodes列表的尾部.
 6                 var  op = document.createElement("p");
 7                var oText = document.createTextNode("hello world");
 8                 op.appendChild(oText); //将节点p添加到body节点下面,
 9                 document.body.appendChild(op);
10             }   
11         </script>
12     </head>
13     <body onload="createchild();">
14          
15     </body>
16 </html>

View Code

　　2:removeChild(),replaceChild()和insertBefore().

　　表示删除一个节点,替换节点,和将添加的节点和插入在哪个节点之前.

　　3:createDocumentFragment()

　　一旦把节点添加到document.body(或者它的后代节点)中,页面就会更新反映出这个变化.对于少量的更新,这是很好的,如果要想document添加大量数据时,如果每个都这样变动的话过程会很缓慢,为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中

 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4              var arrText = ["one","two","three","four","fire"];
 5              for(var i=0;i < arrText.length;i++){
 6                 var oP = document.createElement("p");
 7                 var oText = document.createTextNode(arrText[i]);
 8                 oP.appendChild(oText);
 9                 document.body.appendChild(oP); ////会循环五次.创建五个document.createTextNode();
10              }
11              
12              /*************createDocumentFragment**************/
13              var arrText = ["one","two","three","four","fire"];
14              var oFragment = document.createDocumentFragment();
15              for(var i=0;i < arrText.length;i++){
16                 var oP = document.createElement("p");
17                 var oText = document.createTextNode(arrText[i]);
18                 oP.appendChild(oText);
19                 oFragment.appendCild(oP);
20              }
21              document.body.appendChild(oFragment);//将所有的标签添加到碎片中,然后将这个碎片作为参数传递给appendChild();
22         </script>
23     </head>
24     <body onload="createchild();">
25          
26     </body>
27 </html>