xml--DOM技术

1      DOM技术

1.1    DOM概述

                   Document（文档）        Object（对象）      Model（模型）

                   *文档：标记型文档     （HTML/XML）

                   *对象：封装属性和行为（方法）

                   *模型：共性特征的体现

         DOM是DocumentObject Model（文档对象模型）的缩写

 

1.2  DOM解析HTML

         通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。

                   <spanid="spanId">文本</span>      

         DOM想要操作标记型文档先解析。（解析器）

                   DOM解析HTML（浏览器就可以HTML,浏览器相当于解析器）

 

1.2.1  DOM分层

 

根节点（1个）     

父节点

子节点

兄弟节点

后代

叶子节点（没有子节点）

 

1.2.2  DOM级别

 

1.2.3  DHTML

         动态的HTML，它不是一门语言，是多项技术综合体的简称。包括html，css，dom，javascript。

 

这四种语言的职责：

         Html：负责提供标签，封装数据，这样便于操作数据。

         Css：负责提供样式，对标签中的数据进行样式定义。

         Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。

         Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

 

 

1.3  BOM 和HTML DOM关系图

元素id，属性，文本

 

1.4  Document文本对象-

代表整个文档

1.4.1  获取元素

getElementById("id的值");                                通过元素的id的属性获取元素（标签）对象。

getElementsByName("name属性值");          通过名称获取元素对象的集合（返回数组）

getElementsByTagName("标签名称");          通过标签名称获取元素对象的集合（返回数组）

                                    

1.4.2  创建对象、节点

createElement("元素名称");           创建元素对象

createTextNode("文本内容")          创建文本对象

                                    

appendChild("子节点")                               添加子节点

 

1.5  Element元素对象

1.5.1  获取元素对象

getAttribute("属性名称");                         获取属性的值

setAttribute("属性名称","属性的值"); 设置或者修改属性的值

removeAttribute("属性名称");                删除属性

                                    

1.5.2  获取元素下的所有子节点

         ul.getElementsByTagName();

 

1.6  Node节点对象

1.6.1  节点类型

(1)元素节点

         标签

(2) 属性节点：元素节点.属性

         标签.属性

(3) 文本节点：

         元素节点的子节点一部分，通常为文本                           

<li id="bj"name="BeiJing" >北京</li>

 

 

1.6.2  属性

1.6.2.1       名称类型值

nodeName                 节点名称

nodeType                   节点类型

nodeValue                  节点的值

         而 id, name,value 是具体节点的属性.

 

1.6.2.2       父节点、子节点和同辈节点

父节点：parentNode

         返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。

 

子节点

         childNodes：获取指定节点的所有子节点集合。

         firstChild：获取指定节点的第一个子节点。

         lastChild：获取指定节点的最后一个子节点。

 

同辈节点

         nextSibling:返回一个给定节点的下一个兄弟节点。

         previousSibling：返回一个给定节点的上一个兄弟节点。

 

1.6.3  方法

1.6.3.1       检测子节点和属性

hasChildNodes()                检查是否包含子节点

hasAttributes()                  检查是否包含属性

                                    

1.6.3.2       操作 DOM 节点树

 

1.6.3.3       复制和移动节点

 

1.7  innerHTML    

获取和设置文本内容。

1.7.1  属性：

         获取文本内容

         设置文本内容

 

1.7.2  事件：

                  onclick               点击事件

                   onload               加载事件

                   onfocus             获取焦点事件

                   onblur                失去焦点事件

 

1.8  全选练习、下拉列表左右选择、省市联动

源代码文件：http://download.csdn.net/detail/qq_26553781/9802475